2011-10-29 31 views
0

我想爲柱狀圖中的每個欄指定不同的顏色,但是當我嘗試每個欄都獲取相同的顏色時。爲谷歌圖表中的每個欄指定不同的顏色

代碼:

// Load the Visualization API and the piechart package. 
    google.load('visualization', '1.0', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 
    function drawChart() { 

    // Create the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Something'); 
    data.addColumn('number', 'Numbers'); 
    data.addRows([ 
    ['A', 40], 
    ['B', 17], 
    ['C', 7] 
    ]); 

    // Set chart options 
    var options = {'title':'Megafon 27/10 2011', 
       'width':1300, 
       'height':600, 
     'colors' : ['red', 'blue', 'green'] 
     }; 

    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 

我知道這可能是很容易的,但現在我還看不出來。請幫幫我。

謝謝

拉爾斯

回答

4

更改爲:

... 
// Create the data table. 
var data = new google.visualization.DataTable(); 

var raw_data = [ 
    ['A', 40], 
    ['B', 17], 
    ['C', 7] 
]; 

data.addColumn('string', 'Columns'); 
for (var i = 0; i < raw_data.length; ++i) { 
    data.addColumn('number', raw_data[i][0]); 
} 
data.addRows(1); 
data.setValue(0, 0, 'row'); 
for (var i = 0; i < raw_data.length; ++i) {  
    data.setValue(0, i+1, raw_data[i][1]); 
} 

// Set chart options 
... 

=== UPDATE ===

的簡化版本:

... 
// Create the data table. 
var data = new google.visualization.DataTable(); 

var raw_data = { 
    'A': 40 
    , 'B': 17 
    , 'C': 7 
}; 

data.addRows(1); 
var i = 0; 
for (var index in raw_data) { 
    data.addColumn('number', index); 
    data.setValue(0, i++, raw_data[index]); 
} 

// Set chart options 
... 
+0

我添加了一個簡化版本。 – scessor