如何基于series键值及user字段修改Morris Bar柱状图颜色？

当然可以实现！问题出在你之前的barColors函数里没有正确获取到数据行的user字段，而是错误地依赖了row.y（也就是xkey对应的日期值）和series.key的判断。

解决方案：直接访问数据行的user字段 #

在Morris.js的barColors回调函数中，row参数包含了当前数据行的所有字段（包括你定义的user、beed、y），所以你可以直接通过row.user拿到目标值，然后判断颜色：

var chart = Morris.Bar({
  element : 'morris-bar-chart',
  data : [
    {y : '2006-05-01', user : 1, beed : 90 },
    {y : '2006-05-01', user : 2, beed : 80 },
    {y : '2006-05-01', user : 3, beed : 70 },
    {y : '2006-05-02', user : 1, beed : 190},
    {y : '2006-05-02', user : 1, beed : 290},
    {y : '2006-05-01', user : 2, beed : 90 },
    {y : '2006-05-02', user : 3,beed : 90 }
  ],
  barColors : function(row, series, type) {
    // 直接判断当前数据行的user值
    if (row.user === 1) {
      return "#1AB244"; // 绿色
    } else {
      return "#fec04c"; // 橙色
    }
  },
  xkey : 'y',
  ykeys : [ 'user', 'beed' ],
  labels : [ 'User: ', 'Beed: ' ],
  xLabelAngle : 45,
  hideHover : 'auto',
  resize : true,
  stacked : true
});

进阶：仅针对特定系列设置颜色 #

如果你只想给user系列的柱子按规则上色，而beed系列用其他颜色，可以加上对series.key的判断：

barColors : function(row, series, type) {
  // 仅对user系列应用颜色规则
  if (series.key === 'user') {
    return row.user === 1 ? "#1AB244" : "#fec04c";
  } else {
    // 给beed系列设置专属颜色，或者留空用默认
    return "#666666";
  }
},

这样就能精准控制不同系列的颜色逻辑啦！

内容的提问来源于stack exchange，提问作者rob