Как изменить цвет области заполнения в 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>