Question

我希望能够有条件地为Google图表列图表中的给定列设置颜色，具体取决于其值。例如，如果条形<50，则将其着色为黄色或高于70，将其着色为绿色。如果解决方案是在API本身内完成的话会很好，但情况可能并非如此。

Answer 1

您可以使用'style' column role为特定列着色

样式角色只是数据表中的一列，
应该遵循它应该样式的系列列

如果您想为绿色设置颜色，例如......

['A', 100, 'green']

有条件地指定颜色，
我们可以使用DataView和setColumns method 这允许我们添加计算列

请参阅以下工作片段，
数组用于存储值范围和相关颜色......

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    ['A', 9],
    ['B', 30],
    ['C', 50],
    ['D', 70],
    ['E', 90]
  ]);

  var ranges = [
    [0, 10, '#e53935'],    // red
    [10, 50, '#fdd835'],   // yellow
    [50, 90, '#43a047'],   // green
    [90, null, '#1e88e5']  // blue
  ];

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      var rowValue = dt.getValue(row, 1);
      var color;
      ranges.forEach(function (range, index) {
        if ((rowValue >= range[0]) && ((rowValue < range[1]) || (range[1] === null))) {
          color = range[2];
        }
      });
      return color;
    },
    role: 'style',
    type: 'string'
  }]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, {
    legend: 'none'
  });
});

＆＃13;

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

＆＃13;

谷歌列图有条件地设置颜色

1 个答案: