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

Question

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

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

Answer 1

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

例如：

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

如果你想改变一个特定的点，你就必须修改莫里斯。
您还可以设置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