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

Question

我为我的 jqPlot 图表使用了 EnhancedLegendRenderer 插件，但是我无法让它为饼图工作。

如果我点击图例标签，它们不会显示或隐藏系列。这里是 jsFiddle example.

legend: {
    renderer: $.jqplot.EnhancedLegendRenderer,
    rendererOptions: {
        numberColumns: 3,
        seriesToggle: true
    },
    show: true
}

有没有人遇到并找到解决方案？

Answer 1

我不确定你与 jqPlot 的联系有多紧密，但许多图书馆都有这种选项。Highcharts 有它（如果你关心的话，在大多数情况下是免费的）我在 AmCharts 最近也是。

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

<html>
 <head>
  <script src="https://blog.pint.com/include_files/zingchart-html5-min.js"></script>
     <script src="http://cdn.zingchart.com/zingchart-core.min.js"></script>
<script>zingchart.MODULESDIR="http://cdn.zingchart.com/modules/";</script>
  <meta charset="utf-8">
  <title>Pie chart with legend</title>
 </head>
<div id="zc"></div>
        
 <script> 
      var piedemo ={

        "type":"pie",
        "plot":{
            "value-box":{
                "text":"%v"
            }
        },
        "series":[
            {
                "text":"Apples",
                "values":[5]
            },
            {
                "text":"Oranges",
                "values":[8]
            },
            {
                "text":"Bananas",
                "values":[22]
            },
            {
                "text":"Grapes",
                "values":[16]
            }
        ],
"legend":{
    "header":{
        "text":"Click an item to toggle"
    },
    "layout":"x4",
      "marker":{
          "type":"circle",
          "size":4,
          "border-color":"#333"
      }
  }
};

zingchart.render({
    id: 'zc',
    data: piedemo,
    height: 400,
    width: 400
});



  </script>

 </body> 
</html>

我是 ZingChart 团队的一员，所以如果您对此演示有任何疑问，请随时与我们联系。

Answer 2

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

我重写了 jqPlot 饼图插件，现在您示例中的饼图可以使用了。 Here is my blog post 解释我改变了什么。

下载这 2 个文件：

extendedPieRenderer.js（它取代了 jqplot.pieRenderer.js）
enhancedPieLegendRenderer.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>

我还创建了这个 jsFiddle，您可以打开它并验证显示和隐藏是否有效：http://jsfiddle.net/19vzL5h2/1/

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

jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts

javascript

charts

jqplot