Chart.js图表嵌入CSS Grid容器，视口加宽时无法自适应填充网格单元

问题核心在于：Chart.js的responsive选项默认监听window的resize事件，但CSS Grid布局中，网格容器的尺寸变化可能不会被这个全局监听正确捕获；同时关闭maintainAspectRatio后，图表需要明确的高度参考才能正确渲染。

修复步骤及代码 #

1. 给图表容器设置明确高度（可根据需求调整为固定值、百分比或视口单位），为Chart.js提供尺寸参考
2. 使用ResizeObserver监听图表容器的尺寸变化，主动触发图表重绘，替代仅依赖window resize的监听

修改后的完整代码：

<main>
    <div id="chart-container">
        <canvas id="chart"></canvas>
    </div>
    <div id="other">Some other data here</div>
</main>

<style>
    main {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            'chart chart more';
        /* 避免网格布局塌陷，可根据需求调整 */
        min-height: 80vh;
    }
    #chart-container {
        grid-area: chart;
        /* 给容器设置明确高度，适配场景调整数值或单位 */
        height: 400px;
        /* 强制容器占满网格分配的宽度 */
        width: 100%;
    }
    #other {
        grid-area: more;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const chartElement = document.getElementById('chart');
    const chartContainer = document.getElementById('chart-container');
    
    // 初始化图表
    const myChart = new Chart(chartElement, {
        type: 'line',
        responsive: true,
        maintainAspectRatio: false,
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [{
                label: 'Sample Data',
                data: [17, 15, 8, 2, 12, 19]
            }]
        }
    });

    // 监听容器尺寸变化，触发图表重绘
    const observer = new ResizeObserver(() => {
        myChart.resize();
    });
    observer.observe(chartContainer);
</script>

关键说明 #

• 设置#chart-container的高度：关闭maintainAspectRatio后，Chart.js无法自动计算垂直尺寸，必须通过容器高度确定图表的渲染高度，否则图表无法正常填充空间。
• ResizeObserver：相比全局的window.resize监听，它能精准捕捉网格容器自身的尺寸变化，确保图表在网格单元宽度调整时立即重绘。
• main的min-height：防止因子元素高度不足导致网格布局塌陷，保证图表容器能获取稳定的渲染空间。

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