谷歌列图有条件地设置颜色 [英] google column graphs set color conditionally

问题描述

我希望能够有条件地为谷歌图表柱形图中的给定列设置颜色，具体取决于其值。例如，如果条块<50，则将其着色为黄色或高于70，将其着色为绿色。如果解决方案是在API内部完成的，那将是非常好的，但这可能不会是这样。

解决方案

您可以使用 '样式'列角色为特定的颜色列着色

风格角色只是数据表中的一列，

应该遵循系列栏它应该风格

如果您想要着色一个绿色的例子...

  ['A'，100，'green'] 
  

可以使用 DataView 和 setColumns 方法

允许我们添加一个计算列

请参阅以下工作片段，

数组是u sed存储值范围和相关的颜色...

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']，//红色[10,50，'＃fdd835']，//黄色[50,90，'＃43a047']，//绿色[90，null ，'＃1e88e5'] //蓝色]; 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; }，角色：'style'，类型：'string'}]）; var chart = new google.visualization.ColumnChart（document.getElementById（'chart_div'））; chart.draw（view，{legend：'none'}）;}）;

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

I want to be able to conditionally set a color for a given column in a google graphs column chart depending on its value. for example, if the bar is <50, color it yellow or higher than 70, color it green. It would be great if the solution be accomplished within the API itself but that's probably not going to be the case.

解决方案

you can use a 'style' column role to color specific columns

the style role is just a column in the data table,
that should follow the series column it should style

if you wanted to color a column green for example...

['A', 100, 'green']

to assign a color conditionally,
we can use a DataView, and the setColumns method
which allows us to add a calculated column

see following working snippet,
an array is used to store the value ranges, and the associated color...

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

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

这篇关于谷歌列图有条件地设置颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！