Variierende Balkenfarben mit morris.js Balkendiagramm?

Question

Ich bin ein JavaScript-Anfänger, der morris.js verwendet, um ein Balkendiagramm zu erstellen, in dem jeder Balken mit einem y-Wert eine andere Farbe haben muss. Der folgende Code zeigt, was ich bisher getan habe

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

ich die Messlatte für ‚Person A‘ möchte eine Farbe sein, und dann ‚Person B‘ eine andere Farbe zu sein und so weiter, aber im Moment Alle Balken werden als erste Farbe im Array angezeigt. Weiß jemand, ob es einen Weg gibt, dies zu tun? Vielen Dank!

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