18

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

我尝试使用未记录的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();
    }
});
4

6 回答 6

14

如果您销毁图例，则需要生成完整的图例。更简单的解决方案是对元素使用 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;
        }
    });
于 2013-07-25T12:23:12.590 回答
14

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

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

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

于 2013-11-07T21:31:13.307 回答
8

简单到

myChartObject.legend.update({
   enabled:true
)};
于 2017-02-28T12:33:47.850 回答
5

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

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

$('#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 演示以使用按钮进行切换、显示和隐藏。

于 2014-08-16T04:20:09.223 回答
0

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

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

});
于 2016-01-26T10:58:52.337 回答
-1

迄今为止，世界上唯一可行的解​​决方案：

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

于 2016-08-02T09:39:36.223 回答