我们可以在弹出窗口中显示图例，而不是在带有 Highcharts 的图表容器中。

Posted 2023-02-16

【中文标题】我们可以在弹出窗口中显示图例，而不是在带有 Highcharts 的图表容器中。

【英文标题】：Can we show legends in a popup instead in the chart container with Highcharts.?

【发布时间】：2019-02-14 13:52:47

【问题描述】：

我是 highcharts 的新手。图表图例显示在图表下方，占用太多空间。我们可以实现一些类似于弹出窗口的东西，这些图例将被放置在其中。我们将在图表容器中添加一个按钮，单击它我们将打开此弹出窗口。

【参考方案1】：

可以，但您必须创建自己的自定义图例，例如：

            load: function() 
                var chart = this,
                    legendSymbol;

                $(chart.series).each(function(i, serie) 
                    legendSymbol = "<svg width='20' height='15'>" + serie.legendSymbol.element.outerhtml + "</svg>";
                    $('<span class="customLegendItem">' + legendSymbol + serie.name + '</span>').click(function() 
                        serie.visible ? serie.hide() : serie.show();
                    ).appendTo('#legend');
                );

                $('#toggleLegend').on('click', function() 
                    $('#legend').toggle();
                );
            

现场演示：http://jsfiddle.net/BlackLabel/w3g0fv75/