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

Question

我不熟悉海图。图表图例显示在图表下方，这占用了太多空间。我们可以实现类似图例这样的图例吗？我们将在图表容器中添加一个按钮，单击该按钮将打开此弹出窗口。

Answer 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/