Flot上的渐变

如何在饼图上设置渐变效果？

[{ 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 ] 

Answer 1

我现在已经添加了使用渐变（径向或线性）渲染饼图的支持。 我的提交在pull请求＃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 '
'+label+'
'+Math.round(series.percent)+'%
'; }, background: { opacity: 0.8 } }, combine: { color: '#999', threshold: 0.1 } } }, legend: { show: false } }); 

这些变化是基于@Hoffman提出的上述建议和Luc Boudreau在Flot issue＃355中提出的补丁的组合。

Answer 2

好的，所以我自己做了。 花了一些时间来了解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文件中存在该function（这比pie插件要大得多，复杂得多）而且我没有太多的空闲时间来搞砸它。

Answer 3

目前，图书馆不支持这一点。 如果您愿意合并修补程序，则会提交一个问题355 （跟随原始Google代码问题的链接以获取附件），这会为饼图添加渐变。 不过，我还没有尝试过。