Question

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

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

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

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

Answer 2

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

您所要做的就是将我写的HighchartsExtension添加到您的HTML页面，并为图表添加3个新功能：
myChart.legendHide()，
myChart.legendShow()和
myChart.legendToggle()

见例子：
在Highcharts中浮动传奇：http://jsfiddle.net/P2g6H/
在Highstocks中使用静态图例：http://jsfiddle.net/ps6Pd/

Answer 3

一种相当简单的方法是循环播放该系列并将其更新为不在图例中显示。这允许您在显示图例时动画显示和使用动画，并使用整个容器空间，因为内置了方法。

例如，切换图例项看起来像这样：

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

请参阅this JSFiddle demonstration以使用按钮切换，显示和隐藏。

Answer 4

就像

一样简单

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

Answer 5

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

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

});

Answer 6

到目前为止，世界上只有工作解决方案：

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

手动渲染不起作用（隐藏图例。框等，如果图例中有多个页面，则浏览器按钮保持不变）。 setData调用内部渲染器，它可以很好地执行所有需要的操作嗯，也许到最后你可以这样做：
chart.setSize( chartWidth, chartHeight+chart.legend.fullHeight, false );

Highcharts：隐藏和显示传奇

6 个答案: