谷歌图表 - 更改条形颜色答案

【问题标题】：Google Charts - Change bar color谷歌图表 - 更改条形颜色
【发布时间】：2016-12-27 01:57:48
【问题描述】：

我有一个图表作为示例：

      google.charts.load('current', {'packages':['corechart']});
           
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['C', 0.03, 0.03, 0.06, 0.06, 0.02, 0.02, 0.035, 0.035],
            ['Mn', 1.1, 1.1, 1.4, 1.4, 1, 1, 1.3, 1.3],
            ['Si', 0.3, 0.3, 0.7, 0.7, 0.35, 0.35, 0.7, 0.7]
        ], true);

        var options = {
          legend: 'none',
          bar: { groupWidth: '100%' }, // Remove space between bars.
          //colors: ['#fcb441', 'red', 'black']
          series: {
            0:{color:'red'},
            1:{color:'black'},
          }
        };

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

我需要根据值更改每个元素的第二个条的颜色。

例如：对于“C”元素，需要设置黄色为颜色，但对于“Mn”元素，需要设置绿色为条形颜色...

【问题讨论】：

标签： charts google-visualization

【解决方案1】：

series...color 选项根据列分配颜色
因此它将根据列（系列）为所有行分配相同的颜色

为每一行/元素分配特定的颜色，
使用'style' column role

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Low 0', 'Open 0', 'Close 0', 'High 0', {role: 'style'}, 'Low 1', 'Open 1', 'Close 1', 'High 1', {role: 'style'}],
    ['C', 0.03, 0.03, 0.06, 0.06, 'black', 0.02, 0.02, 0.035, 0.035, 'yellow'],
    ['Mn', 1.1, 1.1, 1.4, 1.4, 'black', 1, 1, 1.3, 1.3, 'lime'],
    ['Si', 0.3, 0.3, 0.7, 0.7, 'black', 0.35, 0.35, 0.7, 0.7, 'magenta']
  ]);

  var options = {
    legend: 'none',
    bar: {
      groupWidth: '100%'
    }
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

【讨论】：

非常感谢。这对我帮助很大。