Question

我正在使用Highcharts，我正在尝试使图例消失并使用按钮显示，以节省一些屏幕空间。

我尝试了所有我能想到的东西，而我设法做的就是使用chart.legend.[group, nav, container].hide()隐藏和显示图例的SVG，但传奇所采用的空白区域永远不会消失。我甚至尝试删除图例DOM元素，但图表不会调整大小（即使调用chart.reflow()也无法帮助。

见这里：http://jsfiddle.net/zbzzn/q83h5g4z/1/

有没有办法让图例消失并重排图表，以便传说中的白色空间消失？

Answer 1

这是我直接坐在Legend原型上的切换方法的草图。它避免了修改容器的宽度和高度。

Highcharts.Legend.prototype.toggle = function () {
    if (this.display) {
        this.group.hide();
    } else {
        this.group.show();
    }
    this.display = !this.display;
    this.chart.isDirtyBox = true;
    this.chart.redraw();
};

http://jsfiddle.net/highcharts/3Bh7b/76/

的现场演示

Answer 2

我设法做了一个有效的黑客：

http://jsfiddle.net/q83h5g4z/4/

我真的希望在没有黑客的情况下还有另一种方法可以做到。

    if (!isVisible) {
        originalLegendHeight = legend.legendHeight;
        legend.options.maxHeight = -1; //0 doesn't work :( because someone did "if (maxHeight)" instead of "if (maxHeight === null)" 
        $('#container').height($('#container').height()-legend.legendHeight); 
        chart.redraw();
        chart.reflow();
    } else {
        legend.options.maxHeight = null;
        $('#container').height($('#container').height()+originalLegendHeight);
        chart.redraw();
        chart.reflow();
    }

Answer 3

请参阅此解决方案：

http://jsfiddle.net/3Bh7b/73/

var legend = chart.legend; 

            if(legend.display) {
                legend.group.hide();
                legend.display = false;
            } else {

                legend.group.show();
                legend.display = true;
            }

Answer 4

我达到的最终解决方案是（其中legendVisible决定了图例的可见性）：

            var legendElement = $(chart.container).find('.highcharts-legend');
            if (legendElement.length > 0) {
                if (chart.legend.options.enabled && legendVisible) {
                    legendElement.show();
                    chart.legend.options.maxHeight = chart.legend.options.originalMaxHeight || null;
                    chart.reflow();
                } else {
                    legendElement.hide();
                    chart.legend.options.originalMaxHeight = chart.legend.options.maxHeight;
                    chart.legend.options.maxHeight = -1;
                    chart.reflow();
                }
            }

使图例在Highcharts中消失

4 个答案: