Highcharts：隐藏和显示图例

zlhcx6iw 于 2022-11-10 发布在 Highcharts

关注(0)|答案(6)|浏览(777)

我希望能够在用户单击按钮时切换图表图例的可见性。
我曾尝试使用未记录的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();
    }
});

highcharts

来源：https://stackoverflow.com/questions/17857680/highcharts-hide-and-show-legend

6条答案

按热度按时间

svmlkihl1#

如果你破坏了图例，那么你需要生成完整的图例。更简单的解决方案是使用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;
        }
    });

赞(0）回复(0）举报 2022-11-10

sbtkgmzw2#

这是我想出的一个有趣的解决方案-适用于Highcharts 3和Highstocks1.3 https://bitbucket.org/jkowalleck/highcharts-legendextension
您所要做的就是将我编写的HighchartsExtension添加到HTML页面中，然后您将获得添加到Chart中的3个新函数：
myChart.legendHide()，
myChart.legendShow()和
myChart.legendToggle()
请参阅示例：
在具有浮动图例的 highcharts 中：http://jsfiddle.net/P2g6H/
在Highstock中，使用静态图例：http://jsfiddle.net/ps6Pd/

赞(0）回复(0）举报 2022-11-10

eivnm1vs3#

简单如

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

赞(0）回复(0）举报 2022-11-10

1zmg4dgp4#

一个相当简单的方法是循环遍历序列，并更新它们使其不显示在图例中。这允许您在显示图例时使用动画，并利用整个容器空间，因为这些方法是内置的。
例如，切换图例项如下所示：

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

赞(0）回复(0）举报 2022-11-10

7xllpg7q5#

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

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

});

赞(0）回复(0）举报 2022-11-10

czfnxgou6#

迄今为止世界上唯一可行的解决办法：

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

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

赞(0）回复(0）举报 2022-11-10

我来回答

Highcharts：隐藏和显示图例

6条答案

相关问题

热门标签

最新问答