如何在Morris.js中更改填充区域颜色

Question

我正在尝试为morris.js中的区域图设置自定义颜色.我已经使用过该lineColors选项,但线下方的区域颜色是某种不透明的.将"设置fillingOpacity为1"不会更改任何内容.

有没有办法为绘制线下方的填充区域正确设置自定义颜色？

Answer 1

使用fillOpacity属性(不是fillingOpacity).设置0到1之间的值.如果将属性设置为1,则不存在透明度.

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: ['Individual Score', 'Team Score'],
  fillOpacity: 0.4,
  hideHover: 'auto',
  behaveLikeLine: true,
  resize: true,
  pointFillColors: ['#ffffff'],
  pointStrokeColors: ['black'],
  lineColors: ['red', 'blue'],
});

<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>