web-dev-qa-db-ja.com

morris.js棒グラフで棒の色を変えますか？

私はmorris.jsを使用して棒グラフを作成するJavaScript初心者ですが、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',
});

「PersonA」のバーを1つの色にし、「Person B」のバーを別の色にしたいなどですが、現在、すべてのバーが配列の最初の色として表示されています。これを行う方法があるかどうか誰かが知っていますか？どうもありがとう！

javascriptmorris.js
10
pooja-bangar
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";
}
});
29
SunilR

リストの値が4つを超えていても、色を変更する方法を見つけました。誰かが答えを探してこのように来るなら

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
                            });
0
Vutlhari Ndlovhu