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

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