Javascript 使用morris.js条形图改变条形图颜色？

我是一个JavaScript初学者，使用morris.js创建一个条形图，需要每个包含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',
});

我希望“Person A”的条形图是一种颜色，然后“Person B”是另一种颜色，以此类推，但目前所有条形图都显示为数组中的第一种颜色。有人知道有没有办法做到这一点吗？

---

非常感谢

我做了一些类似的事情，但是使用了动态项目

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

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

---

我找到了一种方法来更改颜色，即使列表中的值超过四个。如果有人来这里寻找答案

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

var barColorsArray=['#3498DB'、'#34495E'、'#26B99A'、'#DE8244']；
var指数=0；
莫里斯酒吧({
元素：“图形_栏”，
数据：[此处为动态值]
,
xkey:“groupedBy”，
ykeys:[“数字”]，
标签：[“名称”]，
拦河坝：0.4，
BarColor:函数（）{
如果（颜色指数<4）
返回barColorsArray[++colorIndex]；
否则{
颜色指数=0；
返回barColorsArray[++colorIndex]；
}
},
XLA语言：35，
隐藏：“自动”，
调整大小：true
});

也许这个网站对您有帮助：

在Morris图表中的id上添加此属性

<div id="morris-bar-chart" style="height: 200px" data-  colors="#29abe2,#ffc142,#1ab394"></div>

---

佩菲。这对我有帮助+1.

var labelColor = jQuery('#morris-bar-chart').css('color');
Morris.Bar({
  element: 'morris-bar-chart',
  data: [
    { y: '2012', 6: 257,790, 7: 517,920, 8: 0 },
    { y: '2013', 6: 234,696, 7: 732,660, 8: 0 },
    { y: '2014', 6: 172,186, 7: 964,016, 8: 0 },
    { y: '2015', 6: 124,448, 7: 1,127,621, 8: 44,335 },
    { y: '2016', 6: 86,839, 7: 994,627, 8: 116,559 }
  ],
  xkey: 'y',
  ykeys: ['6', '7', '8'],
  labels: ['Drupal 6', 'Drupal 7', Drupal, 8],
  gridTextColor: labelColor,
  barColors: jQuery('#morris-bar-chart').data('colors').split(',')
});