如何用Screenfull.js实现Google图表全屏并解决黑边问题？

你遇到的全屏后上下出现黑边的问题，核心原因有两个：

• 图表容器#piechart的初始高度是固定的200px，进入全屏模式后这个样式依然生效，导致图表只显示200px高，剩余区域就呈现为黑边。
• Google Charts绘制时依赖容器的实际尺寸，但全屏后既没有动态更新图表的尺寸配置，也没有触发正确的重绘逻辑。

我们需要做这几个关键调整来解决问题：

1. 给全屏状态下的容器设置全屏尺寸样式
2. 在全屏切换和窗口 resize 时，动态获取容器实际尺寸并更新图表配置
3. 优化重绘逻辑，避免不必要的重复绘制

下面是修改后的完整代码：

HTML 部分 #

<html>
<body>
    <input type="button" value="Full Screen Mode" id="button1">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/screenfull.js/1.0.4/screenfull.min.js"></script>
    <div id="piechart" style="width: 100%; height: 200px; margin:0; padding:0;"></div>
    <script>
        // JS代码放在此处
    </script>
</body>
</html>

JavaScript 部分 #

$(function() {
    // 全屏切换按钮点击事件
    $('#button1').click(function() {
        const chartContainer = document.getElementById('piechart');
        if (screenfull.isEnabled) {
            screenfull.request(chartContainer);
            // 延迟触发重绘，确保全屏状态已生效
            setTimeout(() => drawChart(), 100);
        }
    });

    // 监听全屏状态变化事件
    if (screenfull.isEnabled) {
        screenfull.on('change', () => {
            drawChart();
        });
    }
});

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

let chartInstance = null;
const chartData = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
]);

function drawChart() {
    const chartContainer = document.getElementById('piechart');
    
    // 根据是否全屏切换容器尺寸
    if (screenfull.isFullscreen) {
        chartContainer.style.width = '100vw';
        chartContainer.style.height = '100vh';
    } else {
        chartContainer.style.width = '100%';
        chartContainer.style.height = '200px';
    }

    const options = {
        title: 'My Daily Activities',
        // 让图表完全自适应容器尺寸
        width: '100%',
        height: '100%'
    };

    // 复用图表实例，避免重复创建
    if (!chartInstance) {
        chartInstance = new google.visualization.PieChart(chartContainer);
    }
    chartInstance.draw(chartData, options);
}

// 窗口resize事件：仅非全屏时触发重绘
$(window).resize(function() {
    if (!screenfull.isFullscreen) {
        drawChart();
    }
});

• 全屏容器样式适配：全屏时给容器设置100vw和100vh，确保占满整个屏幕；退出全屏时恢复原有的100%宽度和200px高度。
• 图表配置优化：将options中的宽高设为100%，让图表完全适配容器的实际尺寸，不再依赖固定值。
• 全屏状态监听：通过screenfull的change事件，在全屏切换完成后自动触发重绘，避免尺寸更新不及时的问题。
• 性能优化：resize事件仅在非全屏时触发重绘，减少不必要的性能消耗；同时复用图表实例，避免重复创建资源。

这样修改后，图表在全屏模式下就能完美占满整个屏幕，退出全屏后也能恢复到原来的200px高度啦！

内容的提问来源于stack exchange，提问作者chiefchamp