5

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

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

3 回答 3

11

我现在添加了对使用渐变(径向或线性)渲染饼图的支持。我的提交在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 BoudreauFlot issue #355中建议的补丁的组合。

于 2012-11-02T01:16:38.093 回答
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 插件更大更复杂),而且我没有太多空闲时间来解决这个问题。

于 2012-10-11T18:52:10.163 回答
0

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

于 2012-10-11T16:44:00.277 回答