Google Charts - 更改条形图的颜色

Question

我想更改条形图中每个条形的颜色。目前，我尝试按照文档中的说明设置颜色选项：

var options = {
        'title' : results.title,
        'width' : 400,
        'height' : 300,
        'is3D' : true,
        'colors' : ["#194D86","#699A36", "#000000"],
        'allowHtml' : true
    }

但它不起作用。基本上，我希望下图中的每个条形图都是相同的颜色：http://jsfiddle.net/etiennenoel/ZThMp/12/

有没有办法做到这一点，还是我必须更改我的代码结构才能这样做？

Answer 1

[编辑 - 下面的编辑中列出了更好的方法]

<击> Visualization API按系列（或DataTable中的列，如果您愿意）对数据进行着色。解决方案是使用DataView将数据拆分为多个系列：

// get a list of all the labels in column 0
var group = google.visualization.data.group(data, [0], []);

// build the columns for the view
var columns = [0];
for (var i = 0; i < group.getNumberOfRows(); i++) {
    var label = group.getValue(i, 0);
    // set the columns to use in the chart's view
    // calculated columns put data belonging to each label in the proper column
    columns.push({
        type: 'number',
        label: label,
        calc: (function (name) {
            return function (dt, row) {
                return (dt.getValue(row, 0) == name) ? dt.getValue(row, 1) : null;
            }
        })(label)
    });
}
// create the DataView
var view = new google.visualization.DataView(data);
view.setColumns(columns);

设置＆＃34; isStacked＆＃34;图表中的选项为＆＃34; true＆＃34;修复产生的列间距问题，并使用视图而不是DataTable绘制图表：

var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(view, {
    // options
    isStacked: true
});

查看示例here。

[编辑：可用于更新Visualization API的新（改进）方法]

您现在可以使用新的＆＃34;样式＆＃34;列角色，用于指定列的样式。它的工作原理如下：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addColumn({type: 'string', role: 'style'});
    data.addRows([
        ['Foo', 5, 'color: #ac6598'],
        ['Bar', 7, 'color: #3fb0e9'],
        ['Baz', 3, 'color: #42c698']
    ]);

    var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
    chart.draw(data, {
        height: 400,
        width: 600,
        legend: {
            position: 'none'
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

请参阅此处的示例：http://jsfiddle.net/asgallant/gbzLB/

Answer 2

您的问题有一个解决方案。您需要在选项中添加series。我已经回答了类似的问题。请参阅我的回答here.我希望这会对您有所帮助。