Question

我试图为morris.js中的条形图设置自定义颜色。但在我的代码中，它只更改悬停标签文本。

这是我的代码：

    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) {
        console.log("--> "+row.label, series, type); // output in console
            if (series.key == 'user' || series.key == 'beed') { // Doesn't work if series.key == 'beed' not included in if condition. 
                if (row.y == '1')
                    return "#1AB244"; // green
                else
                    return "#fec04c"; // orange
            }
        },
        xkey : 'y',
        ykeys : [ 'user', 'beed' ],
        labels : [ 'User: ', 'Beed: ' ],
        xLabelAngle : 45,
        hideHover : 'auto',
        resize : true,
        stacked : true
    });

我知道通过将 xkey 更改为＆＃39; user＆＃39; 更改条形码颜色会更容易，然后使用以下代码：

barColors: function (row, series, type) {
if(row.label == "1") return "#1AB244"; // green
else return "#fec04c"; // orange
}

但是我想改变整个条形图颜色的颜色，其中＆＃39; y＆＃39; 是xkey，其中所有用户都等于＆＃39; 1＆＃39; 设置为绿色颜色，然后条形图的其余部分设置为橙色颜色。这有可能实现吗？

Answer 1

我认为通过检查数据集首先使用javascript定义colors数组更容易，然后通过 barColors 设置应用它。

如何根据系列键值更改Morris条形颜色？

1 个答案: