材料设计谷歌图表改变颜色栏答案

【问题标题】：Material design google charts change color column材料设计谷歌图表改变颜色栏
【发布时间】：2017-04-11 23:41:10
【问题描述】：

在使用 Google 图表时，通常您可以使用“角色：样式”功能更改各个列的颜色，但当我尝试使用新的材料设计图表时，我只能得到蓝色列。

 google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawStuff);

  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ['', '', { role: 'style' } ],
      ["Strongly disagree", 0, 'color: black'],
      ["Disagree", 0, 'color: #000000'],
      ["Neutral", 6, 'color: #212121'],
      ["Agree", 45, 'color: #212121'],
      ['Stongly agree', 98, 'color: black']
    ]);

    var options = {
      title: 'Instructor presented the subject matter clearly',
      width: 900,
      legend: { position: 'none' },
      chart: { subtitle: 'General physics 221 CSUSB winter 2017' },
      axes: {

      },

      bar: { groupWidth: "90%" }
    };

    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    // Convert the Classic options to Material options.
    chart.draw(data, google.charts.Bar.convertOptions(options));
  };

【问题讨论】：

there are several options 不受 material 图表支持 - 包括列角色 - 检查 this answer 的颜色选项...

标签： charts google-visualization

【解决方案1】：

你可以试试netx代码：

 google.charts.load('current', {packages: ['corechart', 'bar']});
  google.charts.setOnLoadCallback(drawColColors);

  function drawColColors() {
    var data = new google.visualization.arrayToDataTable([
      ['', '', { role: 'style' } ],
      ["Strongly disagree", 12, 'brown'],
      ["Disagree", 30, 'gray'],
      ["Neutral", 26, 'blue'],
      ["Agree", 45, 'color: #F05921'],
      ['Stongly agree', 58, 'black']
    ]);

    var options = {
      title: 'Instructor presented the subject matter clearly',
      width: 900,
      legend: { position: 'none' },
      chart: { subtitle: 'General physics 221 CSUSB winter 2017' },
      axes: {

      },

      bar: { groupWidth: "90%" }
    };

    //var chart = new google.charts.Bar(document.getElementById('chart_div'));
    // Convert the Classic options to Material options.
    //chart.draw(data, google.charts.Bar.convertOptions(options));
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
  };

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

【讨论】：