Highcharts：隐藏并显示图例 [英] Highcharts: Hide and show legend

问题描述

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

I'd like to be able to toggle the visibility of the legend of a chart when the user clicks a button.

我试图隐藏图例未记录的 destroy（）方法，但是当我尝试重新渲染图例及其项目时，项目显示在图表的左上角而不是图例内。这些物品似乎没有任何附加的事件处理程序（点击物品不再切换系列）。

I've tried hiding the legend using the undocumented destroy() method, however when I try to re-render the legend and it's items, the items appear in the top left of the chart instead of within the legend. The items also don't seem to have any of their event handlers attached (clicking on an item no longer toggles a series).

有没有更好的方法可以做到这一点？我必须同时支持SVG和VML实现，所以我正在寻找解决这两个问题的解决方案。

Is there a better way to do this? I have to support both SVG and VML implementations, so am looking for a solution that would address both.

JSFiddle示例
$ b

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（）函数。

In case when you destroy legend, then you need to generate full legend. Simpler solution is use hide() / show() function for elements.

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;
        }
    });

这篇关于Highcharts：隐藏并显示图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！