Googleのグラフでさまざまな色のバーを作成する方法は？

Question

私は、縦棒グラフを生成する次のコードを持っています。

<script type="text/javascript"> 
//google.charts.load('current', {packages: ['corechart', 'bar']}); 
    google.setOnLoadCallback(drawBar); 

    function drawBar() { 

    var data = google.visualization.arrayToDataTable([ 
    ['Number of Visits', 'Average Check Size',{ role: 'style' }], 
    ['8+', 26.22, '#083874'], 
    ['4-7', 30.34,'#94CAFC'], 
    ['2-3', 24.09,'#EBBA25'], 
    ['1', 27.95,'#F59E47'] 
    ]); 

    var formatter = new google.visualization.NumberFormat({ 
fractionDigits: 1, 
prefix: '$' 
}); 

formatter.format(data, 1); 

      var view = new google.visualization.DataView(data); 
      view.setColumns([0, 1, 
          { calc: "stringify", 
           sourceColumn: 1, 
           type: "string", 
           role: "annotation" }]); 
    var options = { 
    //chartArea: {width: '50%'}, 
    hAxis: { 
     title: 'Average Check Size', 
     titleTextStyle: {italic: false}, 
     minValue: 0,gridlines: { color: 'transparent'} 
    }, 
    vAxis: { 
    minValue: 0, 
     title: 'Number of Visits', 
     titleTextStyle: {italic: false}, 
     gridlines: { color: 'transparent'}}, 
     //colors: ['red','green','blue','yellow'], 
    legend: {position: 'none'}, 
    }; 

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_bar')); 

    chart.draw(view, options); 
} 

出力は、バーのそれぞれに注釈をカラムチャートです。私は同様の種類の出力をしたいが、すべての4つのバーは異なる色を持たなければならない。それ、どうやったら出来るの？お勧めします

Answer 1

style roleを使用できます。 Googleのグラフページにexamplesがあります。ここにはjsfiddleがあります。

var data = google.visualization.arrayToDataTable([ 
     ['Element', 'Density', { role: 'style' }], 
     ['Copper', 8.94, '#b87333'],   // RGB value 
     ['Silver', 10.49, 'silver'],   // English color name 
     ['Gold', 19.30, 'gold'], 

     ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration 
     ]);