我希望能够在用户单击按钮时切换图表图例的可见性。
我尝试使用未记录的 destroy()
方法隐藏图例,但是当我尝试重新渲染图例及其项目时,这些项目反而出现在图表的左上角传说中的。这些项目似乎也没有附加任何事件处理程序(单击项目不再切换系列)。
有更好的方法吗?我必须同时支持 SVG 和 VML 实现,因此我正在寻找能够同时解决这两个问题的解决方案。
<强> JSFiddle Example
$('#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;
}
});
关于javascript - Highcharts:隐藏和显示图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17857680/