Javascript 弗洛特梯度

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

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

---

该库目前不支持该功能。如果你对合并补丁感到满意，那么有一个补丁是随附的（按照原始谷歌代码问题的链接获取附件），它为馅饼添加了渐变。不过，我自己还没有试过。

好的，所以我自己做了。我花了一段时间来理解flot的内部工作原理，但最终我找到了需要改变的部分。在jquery.flot.pie.js上，将drawSlice函数（flot 0.7上的第406行）更改为：

我会尝试做一个很酷的图表，然后我会截图，并张贴在这里

编辑：给你：

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插件大得多、复杂得多）上有这个功能，我没有太多的空闲时间来处理这个问题。

我现在添加了对渲染带有渐变（径向或线性）的饼图的支持。我的提交在中引用

带有径向渐变的“默认”饼图示例：

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

具有径向渐变的圆环图示例：

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

具有径向渐变的倾斜饼图示例：

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

$绘图（$（“#图9_梯度”），数据，
{
系列：{
馅饼：{
秀：没错，
半径：1，
倾斜：0.5，
坡度：{
是的，
颜色：[
{不透明度：0.5}，
{不透明度：1.0}
]
},
标签：{
秀：没错，
半径：1，
格式化程序：函数（标签，系列）{
返回'+label+'
'+Math.round（series.percent）+'%；
},
背景：{不透明度：0.8}
},
合并：{
颜色：“#999”，
阈值：0.1
}
}
},
图例：{
节目：假
}
});

---

这些变化是基于@Hoffman提出的上述建议和中提出的建议的组合。

您知道该面片是否添加了从饼图中心开始的径向梯度吗？或者它只是整个饼图从下到上的不透明度设置？看起来面片使用线性渐变，这对于饼图来说非常奇怪。我想我必须写我自己的。如果你需要@DNS的功能，请检查我的答案。嘿，伙计，很酷。我接受了你的答案，它可能比我的要简单得多。告诉我，它能起到倾斜效应吗？@Hoffmann，谢谢你接受我的回答。我已经更新了我的答案，加入了一个带有倾斜饼图的示例，它似乎很有效，至少按照我的预期。它也适用于线性渐变，但它看起来很糟糕，所以我没有包括一个例子。嘿@mtr，使用线性渐变时有一个bug。它们只占饼图的一半。要在drawSlice函数上修复它，请更改为：gradient=ctx.createLinearGradient（0，-bottom/2，0，bottom/2）注意，这不再使用top属性，因此我不确定它是否会在不在绘图中心的图表上修复100%（可能会将顶部的一半添加到两个非零参数？）。无论如何，渐变也设置为从绘图区域的底部开始，而不是饼图的开始，这使得饼图不能完全覆盖绘图区域的图表变得糟糕。径向梯度很好。