谷歌材料图表柱形图（条形图）自定义列颜色不起作用答案

【问题标题】：Google Material chart Column Chart (Bar chart) custom column color not working谷歌材料图表柱形图（条形图）自定义列颜色不起作用
【发布时间】：2016-07-24 11:28:02
【问题描述】：

我想在HTML-JavaScript 中使用google chart 绘制一个简单的柱形图。我使用Google materiel chart CDN 绘制了一个柱形图有4 行4 种不同的颜色强>.

我尝试了很多选项，但没有一个能正常工作。当我使用colors: ['#b0120a', '#004411', '#ffab91', '#004411'] 时，只有第一种颜色显示在所有 4 列中。我也试过{role:'style'}，但还是不行。

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      //google.charts.load('current', {'packages':['bar']});
      google.charts.load('visualization', '1', {packages: ['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        /*var data = google.visualization.arrayToDataTable([
          ['Class', 'Total',{role: 'style'}],
          ['A', 10,'color: #b0120a'],
          ['B', 30,'color: #004411'],
          ['C', 20,'color: #ffab91'],
          ['D', 30,'color: #004411']
        ]);*/
        var data = google.visualization.arrayToDataTable([
          ['Class', 'Total'],
          ['A', 10],
          ['B', 30],
          ['C', 20],
          ['D', 30]
        ]);

        var options = {
          isStacked: true,
          title: 'Class wise total students',
          colors: ['#b0120a', '#004411', '#ffab91', '#004411'],
         };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>

图表是这样的：

但我想要 4 列的 4 种不同颜色。提前致谢。

【问题讨论】：

Google Bar Chart cannot Change Individual Bar Color的可能重复
我已经在 stackoverflow 上搜索了所有这些相关的问题，但没有发现任何比我的问题更模糊的问题，这就是我单独发布我的问题的原因。

标签： javascript android charts google-visualization

【解决方案1】：

是的，我终于把这个改正了，这正是我想要的。如果您需要，请参阅下面的代码。

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('visualization', '1.1', {packages: ['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {    
        var data = google.visualization.arrayToDataTable([
          ['Class', 'Total',{role: 'style'}],
          ['A', 10,'color: #b0120a'],
          ['B', 30,'color: #004411'],
          ['C', 20,'color: #ffab91'],
          ['D', 30,'color: #004411']
        ]);

        var options = {
          isStacked: false,
          title: 'Class wise total students',
         };

        var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
        chart.draw(data, options);
      }
    </script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>

我需要在这里更改chart 的定义。从var chart = new google.charts.Bar(document.getElementById('columnchart_material')); 到修改后的var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));。它现在正在工作。图表就像....

【讨论】：

你知道了，column roles，包括'style'，不适用于 Material 图表，仅适用于 Core 图表。 here 是其他一些选项...
示例显示可以设置颜色，但我认为这个解决方案只是将材质图表转换回经典柱形图。材料图表的优点（圆角、现代设计）将消失。