材料设计谷歌图表改变颜色列

时间:2017-04-11 23:41:10

标签: charts google-visualization material

使用Google图表时,通常可以使用" role:style"更改各个列的颜色。功能,但当我用新的材料设计图表尝试时,我只得到蓝色的列。

luaL_*metatable

1 个答案:

答案 0 :(得分: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>