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

【问题标题】：Google Charts bar chart: How to manually change the colour of every bar? (single series)Google Charts 条形图：如何手动更改每个条形的颜色？（单系列）
【发布时间】：2015-01-19 09:12:10
【问题描述】：

我用谷歌图表写了一个简单的条形图，一个系列，效果很好，所有条形都是蓝色的：

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

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

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

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

<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>

【问题讨论】：

标签： javascript google-visualization bar-chart

【解决方案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>

【讨论】：