Javascript jqPlot EnhancedLegendRenderer插件不会为饼图切换系列

我将EnhancedLegendRenderer插件用于我的jqPlot图表，但是我无法使它用于饼图

如果单击图例标签，它们不会显示或隐藏序列。这是

---

有人找到了解决方案吗？

我不确定您与jqPlot的关系有多密切，但许多库都有这种选择。Highcharts有它（如果你担心的话，在大多数情况下是免费的），我最近也看到了它

它也可以通过ZingChart JavaScript图表库获得。我制作了一个带有切换图例的演示，供您尝试

zingchart.MODULESDIR=”http://cdn.zingchart.com/modules/";
带图例的饼图
皮埃德莫酒店={
“类型”：“馅饼”，
“情节”：{
“值框”：{
“文本”：“%v”
}
},
“系列”：[
{
“文本”：“苹果”，
“价值”：[5]
},
{
“文本”：“橙子”，
“价值”：[8]
},
{
“文本”：“香蕉”，
“价值”：[22]
},
{
“文本”：“葡萄”，
“价值”：[16]
}
],
“传奇”：{
“标题”：{
“文本”：“单击要切换的项目”
},
“布局”：“x4”，
“标记”：{
“类型”：“圆圈”，
“大小”：4，
“边框颜色”：“333”
}
}
};
zingchart.render({
id:'zc'，
数据：piedemo，
身高：400，
宽度：400
});

快乐的答案在某种程度上是正确的，ZingChart看起来不错，并且具有开箱即用的功能，但是jqPlot是免费的，开源的

我重新编写了jqPlot饼图插件，现在您的示例中的饼图可以工作了。解释一下我改变了什么

下载以下2个文件：

（它取代了jqplot.pierender.js）

（它取代了 jqplot.enhancedLegendRenderer.js）

并使用如下代码：

<script type="text/javascript" src="jquery.jqplot.js"></script>
<script type="text/javascript" src="extendedPieRenderer.js"></script>
<script type="text/javascript" src="enhancedPieLegendRenderer.js"></script>
<script type="text/javascript">
...
var plot = $.jqplot('chart', data, {
    seriesDefaults: {
      renderer: $.jqplot.PieRenderer
    },
    legend: {
        renderer: $.jqplot.EnhancedPieLegendRenderer
    }
});
...
</script>

...
变量图=$.jqplot（'图表'），数据{
系列默认值：{
渲染器：$.jqplot.pierender
},
图例：{
渲染器：$.jqplot.enhancedPielegenRenderer
}
});
...

---

我还创建了这个JSFIDLE，您可以打开它并验证显示和隐藏是否有效：

请参阅这个FIDLE。这是因为饼图用自己的PieLegendRenderer覆盖了任何渲染器：我试图强制增强图例渲染器，但它只显示了1个标签，而不是5个。您需要重写pieRenderer.js文件，并以某种方式更改PieLegendRenderer类的源代码，以便它支持系列切换。以某种方式组合这些类。如果我有机会的话，我可以试着这么做。嗨，我曾经做过海图（我喜欢它），但问题是我不能免费使用它们。。。特别是如果这是我们组织内部的事情，这就是我们寻找jqplot或flot的主要原因。

<script type="text/javascript" src="jquery.jqplot.js"></script>
<script type="text/javascript" src="extendedPieRenderer.js"></script>
<script type="text/javascript" src="enhancedPieLegendRenderer.js"></script>
<script type="text/javascript">
...
var plot = $.jqplot('chart', data, {
    seriesDefaults: {
      renderer: $.jqplot.PieRenderer
    },
    legend: {
        renderer: $.jqplot.EnhancedPieLegendRenderer
    }
});
...
</script>