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

I am creating a stacked bar chart using google api. Each bar will consist of 3 "slices" representing Negative, Neutral and Positive feedback we received.

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

my data and options code looks as follows:

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

 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));

I have been trying to address that by adding an array like this to options

我一直试图通过向选项添加这样的数组来解决这个问题

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

to options but that only picks the first colour (red) and applies it to whole bars (slices are just separated by gradient).

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

Any tips how to control the colours of each part of the bar chart?

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

Best,

Adam

1 个解决方案

#1

It's possible to change the color style like this :

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

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']
      ]);

Update :

The problem occur in this line :

问题出现在这一行:

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

You using google.charts.Bar instead of google.visualization.ColumnChart

您使用google.charts.Bar而不是google.visualization.ColumnChart

Working example :

工作范例:

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>

---

Reference

• Google Chart Docs Gallery BarChart

Google Chart Docs Gallery BarChart