如何在谷歌图表中制作不同颜色的条形图？

I have the following code which generates a column chart.

我有以下代码生成柱形图。

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

The output is a column chart with annotations on each of the bars. I want to have a similar kind of output but all four bars must have different colors. How do I do that? Please suggest

输出是一个柱形图,每个条形上都有注释。我希望有类似的输出,但所有四个条都必须有不同的颜色。我怎么做?请建议

1 个解决方案

#1

You can use the style role. There are examples on google charts page. And here is a jsfiddle.

您可以使用样式角色。谷歌图表页面上有一些示例。这是一个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
      ]);