Thay đổi màu sắc thanh với biểu đồ thanh morris.js?

Question

Tôi là người mới bắt đầu sử dụng JavaScript morris.js để tạo biểu đồ thanh nơi tôi cần mỗi thanh chứa giá trị y là một màu khác. Mã bên dưới cho thấy những gì tôi đã thực hiện cho đến thời điểm này

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', 
}); 

Tôi muốn thanh cho 'Người A' là một màu và sau đó là 'Người B' là một màu khác, v.v. tất cả các thanh đang được hiển thị dưới dạng màu đầu tiên trong mảng. Có ai biết nếu có một cách để làm điều này? Rất cám ơn!

Answer 1

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"; 
} 
});