如何在饼图上设置渐变效果?
[{
label: i,
data: 1000,
color: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ]
},
//nextserie
]
不起作用。
另外,如何将渐变效果设置为图表的默认颜色?您可以按数字对其进行索引,例如:
[{
label: i,
data: 1000,
color: 1,
},
//nextserie
]
最佳答案
我现在添加了对使用径向或线性渐变渲染饼图的支持。 pull request #853 中引用了我的提交.
带有径向渐变的“默认”饼图示例:
$.plot($("#default_gradient"), data, {
series: {
pie: {
show: true,
gradient: {
radial: true,
colors: [
{opacity: 0.5},
{opacity: 1.0}
]
}
}
}
});
带有径向渐变的圆环图示例:
$.plot($("#donut_gradient"), data,
{
series: {
pie: {
innerRadius: 0.5,
show: true,
gradient: {
radial: true,
colors: [
{opacity: 1.0},
{opacity: 1.0},
{opacity: 1.0},
{opacity: 0.5},
{opacity: 1.0}
]
}
}
}
});
具有径向渐变的倾斜饼图示例:
$.plot($("#graph9_gradient"), data,
{
series: {
pie: {
show: true,
radius: 1,
tilt: 0.5,
gradient: {
radial: true,
colors: [
{opacity: 0.5},
{opacity: 1.0}
]
},
label: {
show: true,
radius: 1,
formatter: function(label, series){
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
},
background: { opacity: 0.8 }
},
combine: {
color: '#999',
threshold: 0.1
}
}
},
legend: {
show: false
}
});
更改基于@Hoffman 和a patch 提出的上述建议的组合。建议 Flot issue #355通过 Luc Boudreau .
关于javascript - Flot 上的渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12844159/