Varying bar colors with morris.js bar chart?

问题:

I'm a JavaScript beginner using morris.js to create a bar chart where I need each bar containing a y value to be a different color. The code below shows what I've done so far

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

I would like the bar for 'Person A' to be one color and then 'Person B' to be another color and so on, but at the moment all bars are being displayed as the first color in the array. Does anyone know if there is a way to do this? Many thanks!

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

回答2:

I did something similar, but with dynamic items.

var $arrColors = ['#34495E', '#26B99A',  '#666', '#3498DB'];
Morris.Bar({
    element: 'div-bars',
    data: [
        {ITENS-DYNAMIC-HERE}
    ],
    xkey: 'item',
    ykeys: ['value'],
    labels: ['Atendimentos'],
    barColors: function (row, series, type) {
        return $arrColors[row.x];
    }, 
    hideHover: 'auto',
    resize: true
});

回答3:

I found a way to change the colors even if the list is more that four values. If anyone ever comes this way looking for an answer

var barColorsArray = ['#3498DB', '#34495E','#26B99A', '#DE8244'];
var colorIndex = 0;

                            Morris.Bar({
                              element: 'graph_bar',
                              data: [DYNAMIC_VALUES_HERE]
                                ,
                              xkey: 'groupedBy',
                              ykeys: ['Numbers' ],
                              labels: ['Names'],
                              barRatio: 0.4,
                              barColors: function () {
                                  if(colorIndex < 4)
                                    return barColorsArray[++colorIndex];
                                  else{
                                      colorIndex = 0;
                                      return barColorsArray[++colorIndex];
                                  }
                                },
                              xLabelAngle: 35,
                              hideHover: 'auto',
                              resize: true
                            });