谷歌图表中的颜色条按其值

Question

我正在尝试按其值对 Google Charts 条形图中的条形进行着色。我从文档中知道，我可以指定样式角色来为特定条形着色特定颜色，但我无法找到一个示例来显示是否可以按值对条形着色。

我创建了一个小提琴来展示我的图表结构。我的数据是一系列连续的整数。

var data = google.visualization.arrayToDataTable([
  ['Asset','Days in Stock'],
  ['4990/473',606],['4990/489',504],['4990/557',159],['4990/559',147],
  ['4990/578',87],['4990/581',63],['4990/582',53],['4990/586',41],
  ['4990/590',25],['4990/592',20],['4990/593',5],
]);

我无法从文档中确定实际上是否可以设置阈值范围来设置条形颜色。理想情况下，我希望能够使用范围格式化程序，但它似乎不适用于条形图类型。

var formatter = new google.visualization.TableColorFormat();
formatter.addRange(0, 60, 'green', '#00ff00');
formatter.format(data, 1);

https://jsfiddle.net/dL997yv6/

因此，如果有一种方法可以使用理想的格式函数来执行此操作，但是如果没有，那么我将满足于使用我的脚本语言中的数据值以编程方式设置每个条的颜色。

Answer 1

颜色格式化程序适用于表格图表

要按值设置条形的颜色，请在数据视图中添加计算列，
类似于注释栏

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Asset','Days in Stock'],
    ['4990/473',606],['4990/489',504],['4990/557',159],['4990/559',147],
    ['4990/578',87],['4990/581',63],['4990/582',53],['4990/586',41],
    ['4990/590',25],['4990/592',20],['4990/593',5],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    // style column
    {
      calc: function (dt, row) {
        if ((dt.getValue(row, 1) >= 0) && (dt.getValue(row, 1) <= 60)) {
          return 'green';
        } else if ((dt.getValue(row, 1) > 60) && (dt.getValue(row, 1) <= 100)) {
          return 'yellow';
        } else {
          return 'red';
        }
      },
      type: 'string',
      role: 'style'
    },
    // annotation column
    {
      calc: 'stringify',
      sourceColumn: 1,
      type: 'string',
      role: 'annotation'
    }
  ]);

  var options = {
    title: '',
    titleTextStyle: {
      fontSize: 16,
      bold: true
    },
    backgroundColor: 'transparent',
    chartArea: {
      left:80,
      top:30,
      bottom:60,
      right:10
    },
    legend: {
      textStyle: {
        fontSize: 11
      }
    },
    vAxis: {
      title: 'Asset',
      textStyle: {
        fontName: 'Arial',
        fontSize: 10
      },
      titleTextStyle: {
        fontSize: 12,
        italic: false,
        bold:true
      }
    },
    hAxis: {
      title: 'Days in Stock',
      gridlines: {
        count: 22
      },
      textStyle: {
        fontName: 'Arial',
        fontSize: 11
      },
      titleTextStyle: {
        fontSize: 12,
        italic: false ,
        bold:true
      }
    },
    pointSize: 3,
    pointShape: 'circle',
    annotations: {
      alwaysOutside: true,
      textStyle: {
        fontName: 'Arial',
        fontSize: 9,
        color: '#000000',
        opacity: 1
      }
    }
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.BarChart(chartDiv);
  chart.draw(view, options);
}

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