javascript - 如何在 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>