javascript - Highcharts:隐藏和显示图例

Question

我希望能够在用户单击按钮时切换图表图例的可见性。

我尝试使用未记录的 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();
    }
});

Answer 1

如果您销毁图例，则需要生成完整的图例。更简单的解决方案是对元素使用 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;
        }
    });