Highcharts：隐藏和显示传奇
我希望能够在用户单击按钮时切换图表图例的可见性。
我尝试使用未记录的destroy()方法隐藏图例，但是当我尝试重新渲染图例及其项目时，这些项目显示在图表的左上角而不是图例中。 这些项目似乎也没有附加任何事件处理程序（单击某个项目不再切换系列）。
有一个更好的方法吗？ 我必须支持SVG和VML实现，所以我正在寻找一种能够解决这两个问题的解决方案。
JSFiddle示例
$('#updateLegend').on('click', function (e) { var enable = !chart.options.legend.enabled; chart.options.legend.enabled = enable; if (!enable) { chart.legend.destroy(); //"hide" legend } else { var allItems = chart.legend.allItems; //add legend items back to chart for (var i = 0; i < allItems.length; i++) { var item = allItems[i]; item.legendItem.add(); item.legendLine.add(); item.legendSymbol.add(); } //re-render the legend chart.legend.render(); } });
如果您销毁图例，则需要生成完整图例。 更简单的解决方案是对元素使用hide（）/ show（）函数。
http://jsfiddle.net/sbochan/3Bh7b/1/
$('#updateLegend').click(function (e) { var legend = chart.legend; if(legend.display) { legend.group.hide(); legend.box.hide(); legend.display = false; } else { legend.group.show(); legend.box.show(); legend.display = true; } });
这是我提出的一个有趣的解决方案 – 适用于Highcharts3和Highstocks1.3 https://bitbucket.org/jkowalleck/highcharts-legendextension
您所要做的就是将我写的HighchartsExtension添加到您的HTML页面，并为图表添加3个新function：
myChart.legendHide() ，
myChart.legendShow()和
myChart.legendToggle()
看看例子：
在Highcharts与浮动传奇： http ： //jsfiddle.net/P2g6H/
在Highstocks与静态传奇： http ： //jsfiddle.net/ps6Pd/
一个相当简单的方法是循环遍历系列并将它们更新为不在图例中显示。 这允许您在显示图例时显示动画，并使用整个容器空间，因为内置了方法。
例如，切换图例项看起来像这样：
$('#toggleButton').click(function() { for(i in chart.series) chart.series[i].update({ showInLegend: chart.series[i].options.showInLegend == null ? false : !chart.series[i].options.showInLegend }, false); chart.redraw(); });
请参阅此JSFiddle演示，以使用按钮切换，显示和隐藏。
就像
myChartObject.legend.update({ enabled:true )};
更新一点选定答案的代码。 现在它会在显示/隐藏图例时增加空间。
$('#updateLegend').click(function (e) { var legend = chart.legend; if(legend.display) { legend.group.hide(); legend.box.hide(); legend.display = false; } else { legend.group.show(); legend.box.show(); legend.display = true; } var series = chart.series[0]; $(chart.series).each(function(){ this.setVisible(true, false); }); chart.redraw(); });
到目前为止，世界上只有工作解决方案：
for (i = 0; i < chart.series.length; i++) chart.series[i].options.showInLegend = true; chart.series[0].setData(chart.series[0].data);
手动渲染不起作用（隐藏legend.box等，如果图例中有多个页面，则浏览器按钮保持不变）。 setData调用内部渲染器，它可以很好地完成所有需要的操作。
嗯，也许到最后你可以这样做：
chart.setSize( chartWidth, chartHeight+chart.legend.fullHeight, false );