Google Chart單獨的條形顏色

Question

我已經閱讀了許多關於此問題的其他問題，並嘗試了提供的每個代碼示例，但都沒有成功。我需要有個人色彩的每一個欄，這是我傳遞到圖中的數據：

var data = google.visualization.arrayToDataTable([ 
    ['Month', 'Count'], 
    ['January 2009', 10], 
    ['February 2009', 20], 
    ['March 2009', 10], 
    ['April 2009', 20], 
    ['May 2009', 10], 
    ['June 2009', 20], 
    ['July 2009', 10], 
    ['August 2009', 20], 
    ['September 2009', 10], 
    ['October 2009', 20], 
    ['November 2009', 10], 
    ['December 2009', 20] 
]); 

我試過設置在這裏建議Google Chart, different color for each bar數據的方法，但是這似乎並沒有工作在X軸上具有字符串值。

我該如何處理字符串X值，數值Y值和單獨設置顏色？

理想情況下，我也想明確地爲每個欄設置顏色，而不僅僅是傳遞一組顏色，這可能嗎？

Answer 1

你可以做的一種方法是爲每組數據創建一個不同的系列。因此，而不是你的數據設置是這樣的：

var data = google.visualization.arrayToDataTable([ 
    ['Month', 'Count'], 
    ['January 2009', 10], 
    ['February 2009', 20], 
    ['March 2009', 10], 
    ['April 2009', 20], 
    ['May 2009', 10], 
    ['June 2009', 20], 
    ['July 2009', 10], 
    ['August 2009', 20], 
    ['September 2009', 10], 
    ['October 2009', 20], 
    ['November 2009', 10], 
    ['December 2009', 20] 
]); 

您要爲每個組數據是這樣加單獨的列：

var data = google.visualization.arrayToDataTable([ 
    ['Month', 'Jan', 'Feb', 'Mar', 'Apr'], 
    ['January 2009', 10, null, null, null], 
    ['February 2009', null, 20, null, null], 
    ['March 2009', null, null, 10, null], 
    ['April 2009', null, null, null, 20], 
]); 

這將使每個系列不同的顏色（也會使圖例中的每個系列和單個項目，根據您的應用程序可能會或可能不會不吸引人）。

你可以寫一個for循環要經過自己的原始數據，並在空添加像這樣的東西自動：

for (var i = 0; i < rawData.getNumberOfRows(); i++) { 
    data.addColumn('string', rawData.getFormattedValue(i, 0)); 
    }; 

    for (var j = 0; j < rawData.getNumberOfColumns() - 2; j++) { 
    data.addRow(); 
    data.setValue(j, 0, rawData.getColumnLabel(j + 1)); 
    for (var i = 0; i < rawData.getNumberOfRows(); i++) { 
     data.setValue(j, i + 1, rawData.getValue(i, j+1)); 
    }; 
    }; 

添加列將添加所有「空」值，那麼你可以設置數據值如你所願。如果不以這種相對尷尬的方式來做（添加所有額外的系列），就沒有任何方法在API中對各種系列進行着色。

如果你不想做這種方式，最好的辦法是在挖至SVG，並找出如何處理與CSS，而不是SVG（這將導致與IE瀏覽器兼容性問題，不過）。