Flot上的渐变 [英] Gradients on Flot

问题描述

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

  [{
 label：i，
数据：1000，
颜色：[rgb（190,110,110），rgb（140,70,70），rgb（110,50,50），rgb（60,10,10） ] 
}，
 // nextserie 
] 
  

不不行。

另外，如何将渐变效果设置为我的图表的默认颜色？在这种方式中，您可以按如下数字对其进行索引：

  [{
 label：i，
 data ：1000，
颜色：1，
}，
 // nextserie 
] 
  

解决方案

我现在已经添加了使用渐变（径向或线性）渲染饼图的支持。我的提交在中建议的补丁 http://code.google.com/u/lucboudreau/\"rel =nofollow noreferrer> Luc Boudreau 。

How can I set gradient effects on pie charts?

[{
label: i, 
data: 1000,
color: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ]
},
//nextserie
]

doesn't work.

Also how can I set gradient effects as default colors for my charts? In the way you can index it by number like:

[{
label: i, 
data: 1000,
color: 1,
},
//nextserie
]

解决方案

I have now added support for rendering pie chart with gradients, either radial or linear. My commit is referenced in pull request #853.

An example "default" pie chart with a radial gradient:

$.plot($("#default_gradient"), data, {
    series: {
      pie: {
        show: true,
        gradient: {
          radial: true,
          colors: [
            {opacity: 0.5},
            {opacity: 1.0}
          ]
        }
      }
    }
});

An example donut chart with a radial gradient:

$.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}
          ]
        }
      }
    }
});

An example of a tilted pie chart with a radial gradient:

  $.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
    }
  });

The changes were based on a combination of the above suggestions proposed by @Hoffman and a patch suggested in Flot issue #355 by Luc Boudreau.

这篇关于Flot上的渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！