谷歌图表,每个栏的颜色不同

Question

我有这个谷歌条形图:

  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',
    });
  }

所有运行都没问题,但问题是,两个条都有相同的颜色,我希望每个条都能有不同的颜色.

谁可以帮我这个事？

Answer 1

不知道为什么没有人提到样式角色列 - 我认为它们是在最初的问题之后添加的,但对于现在正在寻找这个的人来说,更好的方法是:

function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', '');
        data.addColumn('number', '');
        data.addColumn({ type: 'string', role: 'style' });

        data.addRows(2);

        data.setValue(0, 0, 'Value 1');
        data.setValue(0, 1, 250);
        data.setValue(0, 2, 'rgb(200, 20, 60)');
        data.setValue(1, 0, 'Value 2');
        data.setValue(1, 1, 100);
        data.setValue(1, 2, 'rgb(20, 200, 60)');

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

您可以设置许多其他CSS样式,使您的图表真的很难看.

https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

请注意,它似乎不支持rgba()指定的颜色 - 您必须在样式角色上设置不透明度.

这是一个小提琴:

http://jsfiddle.net/a1og7rq4/

SIDENOTE:如果您有多个系列,那么在每个系列数据列之后需要一个样式角色列.

这是另一个显示(不透明度)的小提琴:http://jsfiddle.net/v5hfdm6c/1

这是修改后的功能(为清晰起见,保留上面未经修改的功能)

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', '');
data.addColumn({ type: 'string', role: 'style' });
data.addColumn('number', '');
data.addColumn({ type: 'string', role: 'style' });

data.addRows(2);

var i = 0;
data.setValue(0, i++, 'Value 1');
data.setValue(0, i++, 200);
data.setValue(0, i++, 'color:rgb(200, 20, 60); opacity:0.5');
data.setValue(0, i++, 250);
data.setValue(0, i++, 'rgb(200, 20, 60)');

i = 0;
data.setValue(1, i++, 'Value 2');
data.setValue(1, i++, 120);
data.setValue(1, i++, 'color:rgb(20, 200, 60); opacity:0.5');
data.setValue(1, i++, 100);
data.setValue(1, i++, 'rgb(20, 200, 60)');

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

}

Answer 2

一种hacky做事的方法是将它们全部放在同一行,而API会为此分配不同的颜色.因此,以你的例子

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选项中添加,例如,

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

如果有太多的酒吧,这可能是一个不好的选择,请看

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

Answer 3

确切地说,您必须将colors属性插入options变量中.

...

var options = {
    width: 600, 
    height: 175, 
    title: 'Total',
    legend: 'none',
    colors: ['red', 'green']
};

chart.draw(data, options);
...