我在 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']
});
最佳答案
在 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对此进行说明。
关于javascript - 当值高于或低于 70 时,如何使用 Morris.js 为条形着色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31214553/