Question

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

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

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

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

Answer 1

我不确定你是如何与jqPlot绑定的，但很多图书馆都有这样的选项.Highcharts有它（在大多数情况下如果你担心这是免费的）我在{{3中看到它最近也是。

它也可以通过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

在某种程度上正确的答案，ZingChart看起来不错，开箱即用，但jqPlot是免费的开源。

我重写了jqPlot饼图插件，现在你的例子中的饼图将起作用。 Here is my blog post解释了我的变化。

下载这两个文件：

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>

Pie chart image

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

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

2 个答案: