Google圖表-更改條形的顏色

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

將圖表中的“ isStacked”選項設置為“ true”，以解決導致的列間距問題，並使用視圖而不是DataTable繪制圖表：

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

在這里查看示例。

[編輯：可視化API的更新中提供了新的（改進的）方法]

現在，您可以使用新的“樣式”列角色來指定列的樣式。 它是這樣的：

 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 。 我已經回答過類似的問題。 在這里參考我的答案。 我希望這能幫到您。