Wie man Balken in verschiedenen Farben in Google-Charts erstellt?

Question

Ich habe den folgenden Code, der ein Säulendiagramm generiert.

<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); 
} 

Der Ausgang ist ein Säulendiagramm mit Anmerkungen auf jedem der Stäbe. Ich möchte eine ähnliche Ausgabe haben, aber alle vier Balken müssen unterschiedliche Farben haben. Wie mache ich das? Bitte schlagen Sie

Answer 1

vor Sie können die style role verwenden. Es gibt examples auf Google-Diagrammseite. Und hier ist ein 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 
     ]);