Variant de la barre de couleurs avec morris.js graphique à barres?

Je suis un JavaScript à l'aide de débutant morris.js pour créer un graphique où j'ai besoin de chaque barre contenant une valeur de y, être d'une couleur différente. Le code ci-dessous montre ce que j'ai fait jusqu'à présent

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

Je tiens la barre pour 'Personne' pour être une couleur, puis "Personne B" pour être d'une autre couleur et ainsi de suite, mais pour le moment, tous les bars sont affichés comme la première couleur dans le tableau. Personne ne sait si il existe un moyen de faire cela?
Merci beaucoup!

OriginalL'auteur pooja-bangar | 2014-11-05

  1. 28
    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";
}
});
    Peffect. Cela m'a aidé. +1
    cela devrait être accepté comme réponse correcte.

    OriginalL'auteur SunilR

  2. 4

    J'ai fait quelque chose de similaire, mais avec des éléments dynamiques.

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

    OriginalL'auteur Marcelo

  3. 0

    J'ai trouvé un moyen de changer les couleurs, même si la liste est plus que quatre valeurs. Si jamais quelqu'un vient de cette façon, la recherche d'une réponse

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

    OriginalL'auteur Vutlhari Ndlovhu