2014-11-05 80 views
8

我是一个JavaScript初学者,使用morris.js创建一个条形图,我需要每个包含y值的条形成不同的颜色。下面的代码显示了我迄今所做变化的酒吧颜色与morris.js条形图?

Morris.Bar({ 
element: 'calls-made', 
data: [ 
{ y: 'Person A', a: 10 }, 
{ y: 'Person B', a: 15 }, 
{ y: 'Person C', a: 12 }, 
{ y: 'Person D', a: 20 } 
], 
xkey: 'y', 
ykeys: ['a'], 
labels: ['Calls'], 
barColors: ["#B21516", "#1531B2", "#1AB244", "#B29215"], 
hideHover: 'always', 
}); 

我想为“人A”酒吧是一个颜色,然后“某乙”是另一种颜色等等,但此刻所有条形图都将显示为数组中的第一个颜色。有谁知道是否有办法做到这一点? 非常感谢!

回答

25
Morris.Bar({ 
element: 'bar-example', 
data: [ 
{ y: 'Person A', a: 10 }, 
{ y: 'Person B', a: 15 }, 
{ y: 'Person C', a: 12 }, 
{ y: 'Person D', a: 20 } 
], 
xkey: 'y', 
ykeys: ['a'], 
labels: ['Calls'], 
hideHover: 'always', 
barColors: function (row, series, type) { 
console.log("--> "+row.label, series, type); 
if(row.label == "Person A") return "#AD1D28"; 
else if(row.label == "Person B") return "#DEBB27"; 
else if(row.label == "Person C") return "#fec04c"; 
else if(row.label == "Person D") return "#1AB244"; 
} 
}); 
+0

Peffect。这帮助了我。 +1 – Bhaskara 2015-05-26 18:31:32

相关问题