javascript - 如何在柱形图中为条形添加不同的颜色

Question

如何为柱形图中的条添加不同的颜色。在选项中添加颜色字段不起作用。请帮忙。

下面是代码片段：

tdata.addRow([col1, arr[0].Manual])
        tdata.addRow([col2, arr[0].Auto]);
        tdata.addRow([col3, arr[0].Amount]);

        options = {
            fontSize: 12,
            height: 430,
            width: 380,
            chartArea: { left: "25%", top: "20%", right: "5%", bottom: "10%" },
            backgroundColor: '#f5f5f5',
            title: 'Project',
            pieSliceText: 'value',
            colors: ['red', 'green', 'blue'],
            'is3D': true
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('drilldown_div'));
        chart.draw(tdata, options);
        return false;

Answer 1

该colors选项将颜色应用于每个系列
，因此如果您有 3 种颜色，则
需要 3 个 y 轴列

如下...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    ['A', 100, 120, 130]
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    colors: ['red', 'green', 'blue']
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

---

要为系列中的各个列着色，请
使用'style'列角色

如下...

注意：使用'style'列角色将使图例无效

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y', {role: 'style', type: 'string'}],
    ['A', 100, 'red'],
    ['B', 120, 'green'],
    ['C', 130, 'blue']
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    legend: 'none'
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

这是根据谷歌文档的答案，使用颜色属性而不是背景颜色。

var options = {   width: 400,   height: 240,   title: 'Toppings I Like On My Pizza',   colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'] };

chart.draw(data, options);

你可以在这里找到更多