在莫里斯中.js是否可以更改单行中每个点的颜色

Question

我正在使用Morris.js来绘制折线图。

是否可以更改单行中每个点的颜色？

Answer 1

您可以使用 .
pointFillColors更改点的颜色以及圆点周围的圆圈的颜色与pointStrokeColors.

例如：

pointFillColors: ['grey', 'red'],
pointStrokeColors: ['black', 'blue'],

如果要更改特定点，则必须修改Morris.
您还可以设置goals为特定值绘制线条。

我扩展了莫里斯并添加了这些参数：checkYValues、yValueCheck、yValueCheckColor。

用法：

checkYValues: "eq" // Possible values: eq (equal), gt (greater than), lt (lower than)
yValueCheck: 3 // A value to check
yValueCheckColor: "pink" // A color to draw the point

(function () {
    var $, MyMorris;
    MyMorris = window.MyMorris = {};
    $ = jQuery;
    MyMorris = Object.create(Morris);
    MyMorris.Grid.prototype.gridDefaults["checkYValues"] = "";
    MyMorris.Grid.prototype.gridDefaults["yValueCheck"] = 0;
    MyMorris.Grid.prototype.gridDefaults["yValueCheckColor"] = "";
    MyMorris.Line.prototype.colorFor = function (row, sidx, type) {
        if (typeof this.options.lineColors === 'function') {
            return this.options.lineColors.call(this, row, sidx, type);
        } else if (type === 'point') {
            switch (this.options.checkYValues) {
                case "eq":
                    if (row.y[sidx] == this.options.yValueCheck) {
                        return this.options.yValueCheckColor;
                    }
                    break;
                case "gt":
                    if (row.y[sidx] > this.options.yValueCheck) {
                        return this.options.yValueCheckColor;
                    }
                    break;
                case "lt":
                    if (row.y[sidx] < this.options.yValueCheck) {
                        return this.options.yValueCheckColor;
                    }
                    break;
                default:
                    return this.options.pointFillColors[sidx % this.options.pointFillColors.length] || this.options.lineColors[sidx % this.options.lineColors.length];
            }
            return this.options.pointFillColors[sidx % this.options.pointFillColors.length] || this.options.lineColors[sidx % this.options.lineColors.length];                   
        } else {
            return this.options.lineColors[sidx % this.options.lineColors.length];
        }
    };
}).call(this);
Morris.Line({
    element: 'chart',
    data: [
        { y: '2015-01', a: 1, b: 5 },
        { y: '2015-02', a: 2,  b: 3 },
        { y: '2015-03', a: 2,  b: 9 },
        { y: '2015-04', a: 7,  b: 4 },
        { y: '2015-05', a: 2,  b: 2 },
        { y: '2015-06', a: 3,  b: 3 },
        { y: '2015-07', a: 1, b: 2 }
      ],
    xkey: 'y',
    ykeys: ['a', 'b'],
    labels: ['Line 1', 'Line 2'],
    hideHover: 'auto',
    resize: true,
    pointFillColors: ['grey', 'red'],
    pointStrokeColors: ['black', 'blue'],
    lineColors: ['red', 'blue'],
    goals: [3],
    goalLineColors: ['pink'],
    checkYValues: "eq",
    yValueCheck: 3,
    yValueCheckColor: "pink"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
<div id="chart"></div>

Answer 2

您可以更改整条线的点的颜色，但不能单独更改每个点的颜色：https://github.com/morrisjs/morris.js/issues/387