Bootstrap面板全屏切换时Highcharts图表自适应比例问题求助

嗨，我明白你遇到的困扰了——当Bootstrap面板切换到全屏模式时，Highcharts图表没能跟着自动缩放对吧？这是因为Highcharts默认只会在窗口大小改变时自动重绘，但面板全屏只是容器元素的尺寸变化，不会触发window的resize事件，所以图表“不知道”要更新尺寸。

下面给你两种简单有效的解决方法：

方法一：手动触发图表重绘 #

最直接的方式就是在切换全屏状态后，调用Highcharts的reflow()方法，强制图表重新计算尺寸并渲染。

首先，你需要把图表实例保存下来，这样后面才能调用它的方法。然后在全屏切换的点击事件里，切换完panel-fullscreen类之后，调用chart.reflow()。

修改后的JavaScript代码如下：

$(document).ready(function() {
    // 保存图表实例，方便后续调用重绘方法
    const chart = Highcharts.chart('container', {
        title: {
            text: 'Solar Employment Growth by Sector, 2010-2016'
        },
        subtitle: {
            text: 'Source: thesolarfoundation.com'
        },
        yAxis: {
            title: {
                text: 'Number of Employees'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2010
            }
        },
        series: [{
            name: 'Installation',
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
            name: 'Manufacturing',
            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }, {
            name: 'Sales & Distribution',
            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        }, {
            name: 'Project Development',
            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        }, {
            name: 'Other',
            data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });

    // Toggle fullscreen
    $("#panel-fullscreen").click(function(e) {
        e.preventDefault();
        var $this = $(this);
        if ($this.children('i').hasClass('glyphicon-resize-full')) {
            $this.children('i').removeClass('glyphicon-resize-full');
            $this.children('i').addClass('glyphicon-resize-small');
        } else if ($this.children('i').hasClass('glyphicon-resize-small')) {
            $this.children('i').removeClass('glyphicon-resize-small');
            $this.children('i').addClass('glyphicon-resize-full');
        }
        // 切换全屏类
        $(this).closest('.panel').toggleClass('panel-fullscreen');
        // 强制图表重绘，适配新的容器尺寸
        chart.reflow();
    });
});

方法二：监听容器尺寸变化（更通用） #

如果你的场景里容器尺寸可能通过其他方式改变（不止全屏切换），可以用MutationObserver来监听容器的样式变化，一旦尺寸改变就触发重绘。

示例代码如下（可以加在上面的JS里）：

// 监听图表容器的尺寸变化
const observer = new MutationObserver(() => {
    chart.reflow();
});

observer.observe(document.getElementById('container'), {
    attributes: true,
    attributeFilter: ['style'],
    childList: false,
    subtree: false
});

这样不管是全屏切换还是其他操作导致容器尺寸变化，图表都会自动适配。

额外优化提示 #

为了让图表在全屏时能更好地占满空间，你可以给图表容器加个基础样式：

#container {
    width: 100%;
    height: 400px;
    min-height: 300px;
}

确保容器在不同状态下都有合适的宽高，图表重绘后就能完美适配啦。

内容的提问来源于stack exchange，提问作者Kees de Jager