Question

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

SCRIPT：

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";
}

用法：

渐变线性渐变格式：“ - [ - [：]] * - ”，例如：“90-＃fff-＃000” - 从白色到黑色的90°渐变或“0-＃fff-＃f00：20-＃000” - 从白色到红色（20％）到黑色的0°渐变。

径向渐变：“r [（，）] [ - [：]] * - ”，例如：“r＃fff-＃000 “ - 从白色到黑色的渐变或”r（0.25,0.75）#ffff-＃000“ - 从白色到黑色的渐变，焦点在0.25,0.75。焦点坐标在0..1范围内。径向渐变只能应用于圆和椭圆。

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

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

有没有办法让morris.js区域图表渐变

1 个答案: