2012-07-11 32 views

回答

2

沒有改變每個欄的顏色的官方文檔,但有一個簡單的技巧來實現這一點。您可以使用isStacked:true並重疊兩個小節。如果您只需要其他顏色,請使用第二欄。

Final Output

代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 

    <title> 
     Google Visualization API Sample 
    </title> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['corechart']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     // Create and populate the data table. 


     var data = new google.visualization.DataTable(); 
     // Add columns 
     data.addColumn('string', 'Category'); 
     data.addColumn('number', 'value'); 
     data.addColumn('number','value');//Used for red bar 

     data.addRows(5); 
     data.setCell(0, 0, 'Category 1'); 
     data.setCell(0, 1, 4.25); 
     data.setCell(1, 0, 'Category 2'); 
     data.setCell(1, 1, 2.5); 
     data.setCell(2, 0, 'Category 3'); 
     data.setCell(2, 1, 3.5); 
     data.setCell(3, 0, 'Category 4'); 

     data.setCell(3, 2, 4.5);//Used because we need red or other color bar 
     data.setCell(4, 0, 'Category 5'); 
     data.setCell(4, 1, 3.75); 



     // Create and draw the visualization. 
     new google.visualization.ColumnChart(document.getElementById('visualization')). 
      draw(data,{isStacked: true}); 
     } 


     google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;"> 
    <div id="visualization" style="width: 600px; height: 400px;"></div> 
    </body> 
</html> 

您可以檢查一個快速演示在這裏http://jsfiddle.net/sXmzq/

+0

不錯的做法!謝謝! – 2012-07-14 13:19:40

+0

不客氣:)這是否解決了你的問題? – iNan 2012-07-14 13:20:18

+0

是的,我希望如此:D – 2012-07-14 13:44:37

0

你必須申報所有的顏色使用您的柱形圖。沒有理由他們不能像['blue','blue','blue','red','blue']那樣不同,或者你有什麼不同。

它在「顏色」here下進行了說明。

+0

謝謝您的答覆,但它並不能幫助。我在圖表中使用了一個系列,我需要強調其中的一點。 'colors'選項用於指定每個系列的顏色,而不是每個點。 – 2012-07-13 05:32:03