谷歌條形圖不能改變個別條形顏色

我已經創建了一個谷歌條形圖使用谷歌的可視化API，我試圖添加一個將用於樣式的列。以下是使用.addcolumn（）在下面的實現，然後將顏色字段添加到每一行，但每個小節仍然是默認的藍色。谷歌條形圖不能改變個別條形顏色

<script type="text/javascript"> 
// Runs onload to build the first default chart and load the bar chart package 
var jsonCoachCount; 
window.onload = function(){ 
    jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"}, {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"[email protected]"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]'); 

// Load the Visualization API and the barchart package. 
    google.charts.load('current', {'packages': ['bar']}); 
// Set a callback to run when the Google Visualization API is loaded. 
    google.charts.setOnLoadCallback(drawChart); 

}; 
function drawChart(){ 

    var servicesData = new google.visualization.DataTable(); 

    servicesData.addColumn('string', 'Service'); 
    servicesData.addColumn('number', 'Number of Coaches'); 
    servicesData.addColumn({type:'string', role:'style'}); 

    for(i = 0; i < jsonCoachCount.length; i++){ 
     tempArray =[]; 
     tempArray.push(String (jsonCoachCount[i]['Name']), 
       parseInt(jsonCoachCount[i]['Service_Count']), 
       'color:Red'); 
     servicesData.addRow(tempArray); 
    } 

    var options = { 
     backgroundColor: { 
      fill: '#E8E4D8' 
     }, 
     legend: { position: 'none' }, 
     titleTextStyle:{ 
      bold: 'true' 
     }, 
     chart: { 
      title: 'Coaches by Service', 
      subtitle: 'Coaches by Services: From 2016-09-10 until Today' 
     }, 
     bar: { 
      groupWidth: '60%' 
     }, 
     'hAxis': { 
      textStyle: { 
       fontSize: 11 
      } 
     } 
    }; 

    var chart = new google.charts.Bar(document.getElementById('servicesChart')); 

    chart.draw(servicesData, google.charts.Bar.convertOptions(options)); 

} 
<html> 

<head> 
<script type="text/javascript"  src="https://www.gstatic.com/charts/loader.js"></script> 
</head> 

<body>

</body> 

</html>

我不知道我要去哪裏錯了，或者如果我誤解了一塊文檔。非常感謝幫助我更改條形圖上酒吧的顏色，謝謝！

來源

2016-04-05 chaseshak

A Style Column Role是爲單個條打上顏色的最簡單方法。
但是，它不適用於材料圖表。

對於選項，請參閱圖表例如...

圖1 =資料圖
圖2 =核心圖表
建都以同樣的方式與各種風格設置
工程核心，而不是材料

如果你是罰款，每個欄是相同的顏色...

圖3 =資料圖
用途colors配置選項來改變顏色爲紅色
只有一個系列的存在，所以只接受一種顏色

如果你必須有資料圖用不同的顏色爲每個酒吧...

圖4 =材料圖表
每個值被加到爲一列，而不是一列，創建多個系列
使用colors配置選項來改變顏色，每個條
series選項也可以在這裏使用
然而，更難的工作，注意Spacer柱和缺乏hAxis標籤...

google.charts.load('current', { 
 
    callback: init, 
 
    packages: ['bar', 'corechart'] 
 
}); 
 

 
function init() { 
 
    var jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"}, {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"[email protected]"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]'); 
 

 
    var options = { 
 
     backgroundColor: { 
 
      fill: '#E8E4D8' 
 
     }, 
 
     legend: { position: 'none' }, 
 
     titleTextStyle:{ 
 
      bold: 'true' 
 
     }, 
 
     chart: { 
 
      title: 'Coaches by Service', 
 
      subtitle: 'Coaches by Services: From 2016-09-10 until Today' 
 
     }, 
 
     bar: { 
 
      groupWidth: '60%' 
 
     }, 
 
     hAxis: { 
 
      textStyle: { 
 
       fontSize: 11 
 
      } 
 
     } 
 
    }; 
 

 
    drawChart(); 
 
    drawSeriesChart(); 
 

 
    function drawChart() { 
 
     var servicesData = new google.visualization.DataTable(); 
 

 
     servicesData.addColumn('string', 'Service'); 
 
     servicesData.addColumn('number', 'Number of Coaches'); 
 
     servicesData.addColumn({type:'string', role:'style'}); 
 

 
     for (i = 0; i < jsonCoachCount.length; i++) { 
 
      var tempArray =[]; 
 
      var tempColor; 
 
      switch (i) { 
 
      case 0: 
 
       tempColor = 'color:Red'; 
 
       break; 
 

 
      case 1: 
 
       tempColor = 'orange'; 
 
       break; 
 

 
      case 2: 
 
       tempColor = 'fill-color: gold;'; 
 
       break; 
 

 
      case 3: 
 
       tempColor = 'bar {color: green;}'; 
 
       break; 
 

 
      case 4: 
 
       tempColor = 'bar {fill-color: blue;}'; 
 
       break; 
 

 
      default: 
 
       tempColor = 'bar {fill-color: cyan; stroke-color: black; stroke-width: 4;}'; 
 
      } 
 
      tempArray.push(
 
      String (jsonCoachCount[i]['Name']), 
 
      parseInt(jsonCoachCount[i]['Service_Count']), 
 
      tempColor 
 
     ); 
 
      servicesData.addRow(tempArray); 
 
     } 
 

 
     var chart = new google.charts.Bar(document.getElementById('servicesChart1')); 
 
     chart.draw(servicesData, google.charts.Bar.convertOptions(options)); 
 

 
     var chart = new google.visualization.ColumnChart(document.getElementById('servicesChart2')); 
 
     chart.draw(servicesData, options); 
 

 
     // only one series exists -- only one color will work 
 
     options.colors = ['red']; 
 
     var chart = new google.charts.Bar(document.getElementById('servicesChart3')); 
 
     chart.draw(servicesData, google.charts.Bar.convertOptions(options)); 
 
    } 
 

 
    function drawSeriesChart() { 
 
     var servicesData = new google.visualization.DataTable(); 
 

 
     servicesData.addColumn('string', 'Service'); 
 
     for (i = 0; i < jsonCoachCount.length; i++) { 
 
     servicesData.addColumn('number', String (jsonCoachCount[i]['Name'])); 
 
     servicesData.addColumn('number', 'Spacer'); 
 
     } 
 

 
     var tempArray = []; 
 
     tempArray.push('Number of Coaches'); 
 
     for (i = 0; i < jsonCoachCount.length; i++) { 
 
     tempArray.push(parseInt(jsonCoachCount[i]['Service_Count'])); 
 
     tempArray.push(null); 
 
     } 
 
     servicesData.addRow(tempArray); 
 

 
     options.colors = [ 
 
     'deeppink', 
 
     'red', 
 
     'orange', 
 
     'gold', 
 
     'green', 
 
     'blue', 
 
     'indigo', 
 
     'purple', 
 
     'violet', 
 
     'pink' 
 
     ]; 
 

 
     var chart = new google.charts.Bar(document.getElementById('servicesChart4')); 
 
     chart.draw(servicesData, google.charts.Bar.convertOptions(options)); 
 
    } 
 
}

div { 
 
    padding: 2px 0px 2px 0px; 
 
    font-weight: bold; 
 
} 
 

 
.code { 
 
    background-color: lightgray; 
 
    font-family: Courier New; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div>1. Material Chart</div> 
 
<div id="servicesChart1"></div> 
 
<div>2. Core Chart</div> 
 
<div id="servicesChart2"></div> 
 
<div>3. Material Chart with <span class="code">colors: ['red']</span></div> 
 
<div id="servicesChart3"></div> 
 
<div>4. Multi-Series Material Chart</div> 
 
<div id="servicesChart4"></div>

來源

2016-04-06 13:26:02 WhiteHat

一個很好的解釋，我已經明白了，謝謝！ – chaseshak

有沒有什麼辦法讓標籤與水平材料條一起工作？ – bfritz

對不起，哪些標籤？你是指註釋嗎？如果是這樣，不用標準圖表選項，但你可以嘗試添加你自己的... – WhiteHat

谷歌條形圖不能改變個別條形顏色

回答

相關問題