Highcharts:隐藏和显示传奇

Question

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

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

有一个更好的方法吗？我必须支持SVG和VML实现,所以我正在寻找可以解决这两个问题的解决方案.

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

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 :http://jsfiddle.net/P2g6H/
in Highstocks with static legend: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();
});

请参阅此JSFiddle演示,以使用按钮切换,显示和隐藏.

Answer 4

很简单

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