javascript - Flot 上的渐变

Question

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

[{
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 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中建议的补丁的组合。

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 文件中存在该功能（它比 pie 插件更大更复杂），而且我没有太多空闲时间来解决这个问题。

Answer 3

该库目前不支持该功能。如果您愿意合并补丁，那么有一个与问题 355一起提交（点击原始 Google 代码问题的链接以获取附件），它为饼图添加了渐变。不过，我自己还没有尝试过。