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

Question

我正在使用 google api 创建堆积条形图。每个条将由 3 个 "slices" 组成，代表我们收到的负面、中立和正面反馈。

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

 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

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

Google charts - Stacked Bar Chart. How to introduce different colours within each bar

javascript

charts

google-visualization