当值高于或低于 70 时如何使用 Morris.js 为条形着色答案

【问题标题】：How to color a bar with Morris.js when the value is higher or lower then 70当值高于或低于 70 时如何使用 Morris.js 为条形着色
【发布时间】：2015-07-03 21:48:54
【问题描述】：

我在 stackoverflow 上提出了这个问题： Varying bar colors with morris.js bar chart?

如果B栏中的数据高于或低于70，我想改变它的颜色。

我只是想不通我在这里做错了什么才能让它发挥作用？

这是我的代码：

new Morris.Bar({
element: 'bar-example',
gridTextColor: '#00ff55',
data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
],
barColors : function(row, series, type) {
    if(data.b <70) return ['black', 'white'];
    else if(data.b >= 70) return ['white', 'black'];
},
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});

【问题讨论】：

varColors -> barColors ?您也可以考虑使用>= 70，以防data.b 等于70。还要将 #00ff55 用引号括起来。
我在哪里做了你的建议，但看起来我无法访问数据 b colom？我在玩它：jsbin.com/cekecowiti/edit?html,js,console,output

标签： javascript bar-chart morris.js

【解决方案1】：

在barColors 函数中，您需要查看series.key 的值来确定您正在处理哪个柱。之后，您可以根据需要返回值。假设您希望 B 系列中的条形低于 70 时为红色，否则为蓝色。 A 系列中的条总是绿色的。您的 barColors 函数将如下所示：

barColors: function(row, series, type) {
  if(series.key == 'b')
  {
    if(row.y < 70)
      return "red";
    else
      return "blue";  
  }
  else
  {
    return "green";
  }
}

请参阅 this jsbin 以获取此说明。

【讨论】：