有什么方法可以让morris.js面积图渐变

Question

我正在使用 morris.js 面积图来显示一年的天气预报。

Fiddle POC：http://jsfiddle.net/XtYr7/337/

脚本：

Morris.Area({
 element: 'chart',
 data: [
 { m: 'Jan', value: 3 },
 { m: 'Feb', value: 10 },
 { m: 'Mar', value: 5 },
 { m: 'Apr', value: 17 },
 { m: 'May', value: 6 }
// till December 
 ],
 xkey: 'm',
 ykeys: ['value'],
 labels: ['Orders'],
 parseTime: false,
 lineColors:['#1E9CB5']
});

我想用渐变填充区域。谁能建议我任何解决方法？

Answer 1

使用下面的方法我们可以实现渐变填充

Morris.Area.prototype.fillForSeries = function(i)  
{
var color;
return "10-#3b7078-#b6b120:40-#bc951c-#3b7078:90-#3b7078";
}

用法：

渐变线性渐变格式：“‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”，示例：“90-#fff-#000”——从白到黑的90°渐变或“0-#fff-#f00:20-#000”——从白色经红色（20%）到黑色的 0° 渐变。

径向渐变：“r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›”，示例：“r#fff- #000”——从白色到黑色的渐变或“r(0.25, 0.75)#fff-#000”——从白色到黑色的渐变，焦点在 0.25、0.75。焦点坐标在 0..1 范围内。径向渐变只能应用于圆形和椭圆形。

参考：http://raphaeljs.com/reference.html#Element.attr

演示：http://jsfiddle.net/XtYr7/338/

有什么方法可以让morris.js面积图渐变

Is there any way to make morris.js area chart gradient

jquery

charts

morris.js