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请求#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并提出上述建议的组合补丁中建议海军报问题#355由吕克·布德罗.