Google Charts条形图：如何手动更改每个条形图的颜色？ （单系列）

Question

我用谷歌图表写了一个简单的条形图，一个系列，它工作正常，所有条形都是蓝色的：

现在我想手动设置每个单独栏的颜色（实际上是一个与值成比例的绿色到红色的过渡，以便更容易理解什么是好/坏） 。 我怎么能这样做？

我已尝试按照here所述在colors设置options，但出于某种原因，它在我的代码中不起作用。

chco似乎是我需要的，但它是一个URL参数...如何在JavaScript代码中优雅地集成它？

＆＃13;

＆＃13;

google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Product', 'Score'],
          ['NemakiWare',  288],
          ['Nuxeo',  240],
          ['FileNet',  220],
          ['SharePoint',  98]
        ]);

        var options = {
            colors: ['green','blue','pink','red'],
            legend: 'none',
            hAxis: {
                textPosition: 'none',
                minValue: 0,
                gridlines: {
                    color: 'transparent'
                }
            }
        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

有不同的方法可以执行此操作，但您可以使用样式角色。

<强>来源： https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Product', 'Score', { role: 'style' }],
          ['NemakiWare',  288, 'green'],
          ['Nuxeo',  240, 'blue'],
          ['FileNet',  220, 'pink'],
          ['SharePoint',  98, 'red']
        ]);

        var options = {
            legend: 'none',
            hAxis: {
                textPosition: 'none',
                minValue: 0,
                gridlines: {
                    color: 'transparent'
                }
            }
        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.clearChart();
        chart.draw(data, options);
      }

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>