javascript - Morris JS 中不同颜色的线段

Question

所以我试图在 morris JS 中获得不同的线段。

这是我想要达到的效果。

https://gyazo.com/6d2b7a211a21b810521dac35613a6e3c

这是我正在使用的代码

new Morris.Line({
    element: 'record',
        data: [
            { year: '2008', value: 20 },
            { year: '2009', value: 10 },
            { year: '2010', value: 5 },
            { year: '2011', value: 5 },
            { year: '2012', value: 20 }
        ],
        xkey: 'year',
        ykeys: ['value'],
        labels: ['Value'],
        lineWidth: '1px',
        pointSize: '3px',
        smooth: false,
        hideHover: 'always',
        lineColors: ['#000'],
        axes: 'y',
        ymin: '5',
        ymax: '20',

        yLabelFormat: function (y) {
            if (y != 5 && y != 20) {
                return '';
            }
            else {
                return y;
            }
        },

        lineColors: function(row, sidx, type) {
            console.log(row);
            console.log(this.data[sidx]);
            if (this.data[sidx].src.value > 10) return "#00ff00";
            if (this.data[sidx].src.value > 5) return "#ff00ff";
        }
    });

这是 fiddle 的链接

https://jsfiddle.net/mbe44ep0/

更新:输入此代码后，我收到一些错误。在 @eugen sunic 的评论中指出

Answer 1

尝试使用回调函数。我在 JS 中处理过很多图表，但没有在 Morris js 中处理过。这种语法应该可以做到。

通用回调函数:

lineColors: function(row, sidx, type) {
return "blue"
}

修改后的回调函数:

lineColors: function(row, sidx, type) {
if (row.property >) return "color";
if (row.property >) return "color";
}