从莫里斯面积图中去除线以下的颜色

Question

我需要去除莫里斯面积图中线以下的颜色，我该怎么做？

下面是我使用

Morris.Area({ 
    element: 'area-example', 
    data: [ 
    { y: '2006', a: 100, b: 90 }, 
    { y: '2007', a: 75, b: 65 }, 
    { y: '2008', a: 50, b: 40 }, 
    { y: '2009', a: 75, b: 65 }, 
    { y: '2010', a: 50, b: 40 }, 
    { y: '2011', a: 75, b: 65 }, 
    { y: '2012', a: 100, b: 90 } 
    ], 
    xkey: 'y', 
    ykeys: ['a', 'b'], 
    labels: ['Series A', 'Series B'], 
    fillOpacity: 0.0, 
    lineColors: ['#00acac' , '#348fe2'], 


}); 

Answer 1

如果您不希望显示下方线条的颜色，然后用折线图的代码，它更简单

Morris.Line({ 
    element: 'area-example', 
    data: [ 
    { y: '2006', a: 100, b: 90 }, 
    { y: '2007', a: 75, b: 65 }, 
    { y: '2008', a: 50, b: 40 }, 
    { y: '2009', a: 75, b: 65 }, 
    { y: '2010', a: 50, b: 40 }, 
    { y: '2011', a: 75, b: 65 }, 
    { y: '2012', a: 100, b: 90 } 
    ], 
    xkey: 'y', 
    ykeys: ['a', 'b'], 
    labels: ['Series A', 'Series B'] 

}); 

或者你可以用这样的事情上填充区域，增加填充不透明度（fillOpacity）行下面

Morris.Area({ 
 
    element: 'chart', 
 
    data: [ 
 
    { y: '2015-01', a: 1, b: 2 }, 
 
    { y: '2015-02', a: 2, b: 3 }, 
 
    { y: '2015-03', a: 2, b: 2 }, 
 
    { y: '2015-04', a: 1, b: 4 }, 
 
    { y: '2015-05', a: 2, b: 5 }, 
 
    { y: '2015-06', a: 3, b: 3 }, 
 
    { y: '2015-07', a: 1, b: 2 } 
 
    ], 
 
    xkey: 'y', 
 
    ykeys: ['a', 'b'], 
 
    labels: ['Value A', 'Value B'], 
 
    fillOpacity: 0.8, 
 
    hideHover: 'auto', 
 
    resize: true, 
 
    pointFillColors: ['#fff'], 
 
    pointStrokeColors: ['black'], 
 
    lineColors: ['#f1a340', '#998ec3'], 
 
});

<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="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script> 
 
<link href="http://cdn.oesmith.co.uk/morris-0.5.1.css" rel="stylesheet"/> 
 

 
<div id="chart"></div>

希望它有帮助，享受:)