谷歌图表，每个条形的颜色不同 [英] Google Chart, different color for each bar

问题描述

我有这个 Google 条形图:

I have this Google Bar Chart:

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '');
    data.addColumn('number', '');
    data.addRows(2);
    data.setValue(0, 0, 'Value 1');
    data.setValue(0, 1, 250);
    data.setValue(1, 0, 'Value 2');
    data.setValue(1, 1, 100);

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, {
        width: 400, 
        height: 175, 
        title: 'Total',
        legend: 'none',
    });
  }

一切运行正常，但问题是，两个条形的颜色相同，我希望每个条形都有不同的颜色.

All runs OK, but the thing is, both bars have the same color, and I would like to be able to have different colors for each bar.

有人可以帮我吗?

推荐答案

将它们全部放在同一行中是一种很老套的做法，API 会为此分配不同的颜色.因此，对于您的示例

One hacky way to do things is put them all in the same row, and API would assign distinct colors to this. Hence for your example

function drawChart(){

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Value 1');
    data.addColumn('number', 'Value 2');
    data.addRows(2);
    data.setValue(0, 0, 250);
    data.setValue(0, 1, 100);

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));

    chart.draw(data, {
        width: 600, 
        height: 175, 
        title: 'Total',
        legend: 'none',
    });
} 

如果您需要自己的颜色，请将其添加到 chart.draw 选项 中，例如

If you need your own colors add this in the chart.draw options like,

colors: ['red','yellow', 'blue'],

如果条形太多，这可能是一个不好的选择，请查看

If there are too many bars though, this may be a bad option for that please look at

http://code.google.com/apis/chart/interactive/docs/reference.html#barformatter

这篇关于谷歌图表，每个条形的颜色不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！