jqPlot EnhancedLegendRenderer plugin does not togg

2019-07-20 13:49发布

站内问答 / JavaScript
1337 2 4

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?

2条回答
太酷不给撩
2楼-- · 2019-07-20 14:28

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:

  1. extendedPieRenderer.js (it replaces jqplot.pieRenderer.js)

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

Pie chart image

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

查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
3楼-- · 2019-07-20 14:43

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)