如何在饼图上设置渐变效果?
[{
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
]
如何在饼图上设置渐变效果?
[{
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 提出的上述建议和Luc Boudreau在Flot issue #355中建议的补丁的组合。
好的,所以我自己做了。我花了一段时间来了解 flot 内部是如何工作的,但最终我找到了需要更改的部分。在 jquery.flot.pie.js 上,将 drawSlice 函数(Flot 0.7 上的第 406 行)更改为:
function drawSlice(angle, color, fill)
{
if (angle<=0)
return;
if (fill) {
if (typeof color === "object") {
var grad= ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
var i;
var numColors= color.colors.length;
for (i=0; i< numColors ; i++) {
grad.addColorStop(i/(numColors-1), color.colors[i]);
}
ctx.fillStyle = grad;
} else {
ctx.fillStyle = color;
}
ctx.fillStyle = color;
} else {
ctx.strokeStyle = color;
ctx.lineJoin = 'round';
}
不要删除 if 之后的其余代码。
现在就像魔术一样,您可以使用径向渐变颜色定义您的系列:
[{
label: i,
data: Math.random() *1000,
color: { colors: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ] }
}]
我会尝试制作一个很酷的图表,然后我会截图并在这里发布。
编辑:给你:
var d1= [];
d1.push({
label: "Crítico",
data: Math.random() *1000,
color: { colors: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ] }
});
d1.push({
label: "Médio",
data: Math.random() *1000,
color: { colors: [ "rgb(110,110,190)", "rgb(70, 70, 140)", "rgb(50, 50, 110)", "rgb(10, 10, 60)" ] }
})
this.plot= $.plot($div, d1);
它比使用纯色要好得多,但它可以变得更好,我只是不擅长挑选颜色。现在我发现了一个小问题,图例不适用于我的更改,它们不会显示颜色。我不愿意解决这个问题,因为核心 Flot 文件中存在该功能(它比 pie 插件更大更复杂),而且我没有太多空闲时间来解决这个问题。
该库目前不支持该功能。如果您愿意合并补丁,那么有一个与问题 355一起提交(点击原始 Google 代码问题的链接以获取附件),它为饼图添加了渐变。不过,我自己还没有尝试过。