Question

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

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

Answer 1

您可以使用pointFillColors更改点的颜色以pointStrokeColors为点的圆圈周围的颜色。

例如：

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

如果您想更改特定点，则必须修改Morris 您还可以设置goals以绘制特定值的行。

我扩展了Morris并添加了以下参数：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

在Morris.js中，是否可以在一行中更改每个点的颜色？

2 个答案: