2014-11-05 95 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

相關問題