Google图表 - 堆积条形图。如何在每个栏内引入不同的颜色

Question

我正在使用google api创建堆积条形图。每个柱子将由3个“切片”组成，代表我们收到的负面，中性和正面反馈。

我的数据和选项代码如下所示：

 data = google.visualization.arrayToDataTable([
              ['Category', 'Negative', 'Neutral', 'Positive', ],
              ['icon', 10, 800, 5],
              ['colour', 5, 5, 5],
              ['copy', 5, 5, 5],
              ['navigation', 5, 5, 5]
            ]);
        };
   options = {
        isStacked: true,
        width: '100%',
        height: 400,
        hAxis: {title: 'Category', textStyle: {bold : true, fontSize: 24}, titleTextStyle: {color: 'White'}},
        vAxis: {title: 'Responses', textStyle: {bold : true, fontSize: 24}, titleTextStyle: {color: 'White'}},

        };
  var chart = new google.charts.Bar(document.getElementById('categoryChart'));

        chart.draw(data, google.charts.Bar.convertOptions(options));

我一直试图通过向选项

添加这样的数组来解决这个问题

colors:['red','blue', 'green'].

选项，但只选择第一种颜色（红色）并将其应用于整个条形（切片只是用渐变分隔）。

有关如何控制条形图各部分颜色的提示吗？

最佳，

亚当

Answer 1

可以像这样更改颜色样式：

data = google.visualization.arrayToDataTable([
          ['Category', 'Negative', 'Neutral', 'Positive', { role: 'style' }],
          ['icon', 10, 800, 5, '#b87333'],
          ['colour', 5, 5, 5, 'silver'],
          ['copy', 5, 5, 5, 'gold'],
          ['navigation', 5, 5, 5, 'color: #e5e4e2']
      ]);

<击> 更新：

问题出现在这一行：

var chart = new google.charts.Bar(document.getElementById('categoryChart'));

您使用google.charts.Bar代替google.visualization.ColumnChart

工作示例：

google.load('visualization', '1', {
    packages: ['corechart', 'bar']
});
google.setOnLoadCallback(drawBarColors);

function drawBarColors() {
    var data = google.visualization.arrayToDataTable([
        ['Category', 'Negative', 'Neutral', 'Positive'],
        ['icon', 10, 100, 5],
        ['colour', 5, 5, 5],
        ['copy', 5, 5, 5],
        ['navigation', 5, 5, 5]
    ]);

    var options = {
        isStacked: true,
        width: '100%',
        height: 400,
        colors: ['red', 'blue', 'green'],
        hAxis: {
            title: 'Category',
            textStyle: {
                bold: true,
                fontSize: 24
            },
            titleTextStyle: {
                color: 'White'
            }
        },
        vAxis: {
            title: 'Responses',
            textStyle: {
                bold: true,
                fontSize: 24
            },
            titleTextStyle: {
                color: 'White'
            }
        },

    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart_div"><div>

参考

• Google Chart Docs Gallery BarChart