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

有問題的解決方案。您需要在您的選項中添加series。我已經回答了類似的問題。請參閱我的回答here.我希望這會對你有所幫助。

Answer 2

[編輯 - 有下面編輯概述一個更好的方法]通過一系列

可視化的API顏色的數據（在數據表或列，如果你喜歡）。解決的辦法是使用一個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」選項在圖表中爲「真」來修復導致列間距的問題，以及使用該視圖繪製圖表代替DataTable：

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

查看示例 here。

[編輯：新的（改進）方法可用更新到可視化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/