jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts

问题

I use EnhancedLegendRenderer plugin for my jqPlot charts, however I am unable to get it working for Pie charts.

If I click on the legend labels, they don't show or hide series. Here is jsFiddle example.

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

Has anybody came across and found a solution?

回答1:

The answer of Merrily somehow correct, ZingChart looks good and have such functionality out of the box, but jqPlot is free and open source.

I rewrote jqPlot Pie Chart plugins and now the Pie chart from your example will work. Here is my blog post with explanation what I changed.

Download these 2 files:

extendedPieRenderer.js (it replaces jqplot.pieRenderer.js)
enhancedPieLegendRenderer.js (it replaces jqplot.enhancedLegendRenderer.js)

And use them like this code:

<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>

I also created this jsFiddle which you can open and verify that showing and hiding works: http://jsfiddle.net/19vzL5h2/1/

回答2:

I'm not sure how tied to jqPlot you are, but many libraries have this sort of option baked in. Highcharts has it (and is free in most cases if that is your concern) and I saw it in AmCharts recently too.

It is also available through the ZingChart JavaScript charting library. I've made a demo with the toggle legend for you to try.

<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>

I'm on the ZingChart team so if you have any questions on this demo, please feel free to reach out.

来源：https://stackoverflow.com/questions/29664435/jqplot-enhancedlegendrenderer-plugin-does-not-toggle-series-for-pie-charts

标签

javascript

charts

jqplot