谷歌資料圖柱形圖（條形圖）自定義列的顏色不工作

我想畫一個簡單的柱形圖使用google chart。我HTML-JavaScript已經使用Google materiel chart CDN繪製具有4行柱形圖用4種不同顏色 。谷歌資料圖柱形圖（條形圖）自定義列的顏色不工作

我已經嘗試了很多選擇，但沒有任何工作正常。當我使用colors: ['#b0120a', '#004411', '#ffab91', '#004411']時，只有第一種顏色顯示在所有4列中。我也試過{role:'style'}，但仍然無法正常工作。

<html> 
<head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     //google.charts.load('current', {'packages':['bar']}); 
     google.charts.load('visualization', '1', {packages: ['corechart', 'bar']}); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 

     /*var data = google.visualization.arrayToDataTable([ 
      ['Class', 'Total',{role: 'style'}], 
      ['A', 10,'color: #b0120a'], 
      ['B', 30,'color: #004411'], 
      ['C', 20,'color: #ffab91'], 
      ['D', 30,'color: #004411'] 
     ]);*/ 
     var data = google.visualization.arrayToDataTable([ 
      ['Class', 'Total'], 
      ['A', 10], 
      ['B', 30], 
      ['C', 20], 
      ['D', 30] 
     ]); 

     var options = { 
      isStacked: true, 
      title: 'Class wise total students', 
      colors: ['#b0120a', '#004411', '#ffab91', '#004411'], 
     }; 

     var chart = new google.charts.Bar(document.getElementById('columnchart_material')); 
     chart.draw(data, google.charts.Bar.convertOptions(options)); 
     } 
    </script> 
</head> 
<body> 
<div id="columnchart_material" style="width: 100%; height: 100%;"></div> 
</body> 
</html>

下圖是這樣的：

但我想爲4列4種不同顏色。在此先感謝。

來源

2016-07-24 Avishek

[Google Bar Chart無法更改個別欄顏色]的可能重複（http://stackoverflow.com/questions/36437422/google-bar-chart-can-cannot-change-個人酒吧顏色） – WhiteHat

我已經在stackoverflow上搜索了所有這些相關的問題，但沒有發現任何粘液對我的問題，這就是爲什麼我分別張貼我的問題。 – Avishek

Yaa，最後我做了一個正確的，正是我想成爲的。如果您需要某個時間，請參閱下面的代碼。

<html> 
<head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     google.charts.load('visualization', '1.1', {packages: ['corechart']}); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() {  
     var data = google.visualization.arrayToDataTable([ 
      ['Class', 'Total',{role: 'style'}], 
      ['A', 10,'color: #b0120a'], 
      ['B', 30,'color: #004411'], 
      ['C', 20,'color: #ffab91'], 
      ['D', 30,'color: #004411'] 
     ]); 

     var options = { 
      isStacked: false, 
      title: 'Class wise total students', 
     }; 

     var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material')); 
     chart.draw(data, options); 
     } 
    </script> 
</head> 
<body> 
<div id="columnchart_material" style="width: 100%; height: 100%;"></div> 
</body> 
</html>

我需要在這裏更改chart的定義。從var chart = new google.charts.Bar(document.getElementById('columnchart_material'));改爲var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));。現在正在工作。圖表就像....

來源

2016-07-24 11:46:04 Avishek

你明白了，[專欄角色]（https://developers.google.com/chart/interactive/docs/roles#what-roles-are-available），包括'style'，不適用於_Material_圖表，只有_Core_圖表。 [here]（http://stackoverflow.com/a/36452554/5090771）是一些其他選項... – WhiteHat

是的，你正確@WhiteHat .. – Avishek

谷歌資料圖柱形圖（條形圖）自定義列的顏色不工作

回答

相關問題