如何在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);
}

​

输出是一个柱状图，每个条形图上都有注释。我想有一个类似的输出类型，但所有四个条必须有不同的颜色。我该怎么做？请给出建议

Answer 1

您可以使用style role。在谷歌的图表页面上有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
      ]);