Google棒グラフで個々の棒の色を変更できない

Google Visualization APIを使用してGoogle棒グラフを作成しましたが、スタイルに使用する列を追加しようとしています。以下は、.addcolumn（）を使用して各行にカラーフィールドを追加する実装ですが、各バーはデフォルトの青色です。Google棒グラフで個々の棒の色を変更できない

<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

Style Column Roleは、個々のバーを着色する最も簡単な方法です。
しかし、マテリアルチャートでは機能しません。オプションについて

、たとえばチャートを参照してください...

チャートは1 =材料チャート
チャート2 =コアチャート
どちらも、さまざまなスタイルの設定ではないのコア上
作品と同じように構築されました材料

あなたは、各バーは同じ色であると罰金されている場合...

図表3 =材質チャート
は、各バーに別々の色で素材チャートを持っている必要がありますので、もし一つだけの色

を受け入れ、赤
シリーズが存在している一つだけに色を変更するにはcolors設定オプションを使用します...

図表4 =材質チャート
各値は、複数の直列
を作成する012を使用し、代わりの行の列として追加され各バーの色を変更するには設定オプション
seriesオプションも

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>

...予告 Spacer列と不足 hAxisラベルの、で動作するようにはるかに困難、しかしここ
を使用することができます

出典

2016-04-06 13:26:02 WhiteHat

大きな説明、私は今、ありがとう！ – chaseshak

水平のマテリアルバーでラベルを使用する方法はありますか？ – bfritz

申し訳ありませんが、どのラベル？あなたは注釈を参照していますか？そうであれば、標準のチャートオプションではなく、独自のチャートオプションを追加してみてください... – WhiteHat

Google棒グラフで個々の棒の色を変更できない

答えて

関連する問題