jQuery Highcharts：隐藏和显示图例

Highcharts: Hide and show legend

提问by cfs

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

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

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).

我尝试使用未记录的destroy()方法隐藏图例，但是当我尝试重新渲染图例及其项目时，项目出现在图表的左上角而不是图例中。这些项目似乎也没有附加任何事件处理程序（单击项目不再切换系列）。

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.

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

JSFiddle Example

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

采纳答案by Sebastian Bochan

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

如果您销毁图例，则需要生成完整图例。更简单的解决方案是对元素使用 hide() / show() 函数。

http://jsfiddle.net/sbochan/3Bh7b/1/

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

回答by floww

Here is an interesting solution I came up with - works for Highcharts3 and Highstocks1.3 https://bitbucket.org/jkowalleck/highcharts-legendextension

这是我想出的一个有趣的解决方案 - 适用于 Highcharts3 和 Highstocks1.3 https://bitbucket.org/jkowalleck/highcharts-legendextension

All you have to do is to add the HighchartsExtensionI wrote to your HTML page, and you get 3 new functions added to the Chart:
myChart.legendHide(),
myChart.legendShow()and
myChart.legendToggle()

您所要做的就是将我写的HighchartsExtension添加到您的 HTML 页面中，并且您会在图表中添加 3 个新函数：
myChart.legendHide()，
myChart.legendShow()和
myChart.legendToggle()

See the examples:
in Highcharts with floating legend: http://jsfiddle.net/P2g6H/
in Highstocks with static legend: http://jsfiddle.net/ps6Pd/

查看示例：
在带有浮动图例的 Highcharts 中：http: //jsfiddle.net/P2g6H/
在带有静态图例的 Highstocks 中：http: //jsfiddle.net/ps6Pd/

回答by Halvor Holsten Strand

A fairly simple way to make this is to loop over the series and update them to not show in legend. This allows you to animate in and out of showing the legend and utilize the entire container space, as the methods are built in.

一个相当简单的方法是循环遍历系列并将它们更新为不在图例中显示。这使您可以动画显示图例并利用整个容器空间，因为方法是内置的。

For example, toggling legend items would look like this:

例如，切换图例项如下所示：

$('#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();
});

See this JSFiddle demonstrationfor toggle, show and hide using buttons.

请参阅此 JSFiddle 演示以使用按钮进行切换、显示和隐藏。

回答by MatteoOreficeIT

As simple as

就这么简单

myChartObject.legend.update({
   enabled:true
)};

回答by Ali

Update a code little bit of selected answer. Now it will increase the space when show/hide legend.

更新一点所选答案的代码。现在它会在显示/隐藏图例时增加空间。

$('#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();

});

回答by anrilafosel

So far only working solution in the world:

到目前为止，世界上唯一可行的解​​决方案：

for (i = 0; i < chart.series.length; i++)
          chart.series[i].options.showInLegend = true;
          chart.series[0].setData(chart.series[0].data);  

Rendering manually doesn't work (hiding legend.box etc, always if there are multiple pages in legend, then browser button stays). setDatacalls internal renderer which acts quite good and does all what is needed.
Hmm, maybe in the end you can do this:
chart.setSize( chartWidth, chartHeight+chart.legend.fullHeight, false );

手动渲染不起作用（隐藏 legend.box 等，如果图例中有多个页面，则始终保留浏览器按钮）。 setData调用内部渲染器，它的作用非常好，可以完成所有需要的工作。
嗯，也许最后你可以这样做：
chart.setSize( chartWidth, chartHeight+chart.legend.fullHeight, false );