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

Question

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

现在我想手动设置每个条形图的颜色（实际上是一个与值成比例的green-to-red过渡，以便更容易理解什么是 good/bad）。我该怎么做？

我已尝试按照 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>

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>

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

Google Charts bar chart: How to manually change the colour of every bar? (single series)

javascript

google-visualization

bar-chart

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

Google Charts bar chart: How to manually change the colour of every bar? (single series)

javascript

google-visualization

bar-chart

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