修复Bootstrap网格布局中chart.js图表无法自适应恢复大小并保持宽高比

问题根源是Chart.js默认的resize监听没有完全适配Bootstrap网格的动态宽度变化，尤其是窗口从窄变宽时，图表不会自动重新计算容器宽度。可以通过以下两步解决：

步骤1：给Canvas容器添加样式约束 #

给包含canvas的.col容器添加定位约束，同时强制canvas继承容器宽度，避免尺寸被固定：

修改后的HTML代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.0/chart.umd.js"></script>

<div class='container-fluid'>
  <div class='row'>
    <div class='col' style="position: relative; padding: 1rem;">
      <canvas id='canvas-id' style="width: 100% !important; height: auto !important;"></canvas>
    </div>
    <!-- further columns -->
  </div>
  <!-- further rows -->
</div>

步骤2：手动监听窗口resize事件触发图表重绘 #

Chart.js自带的resize监听在Bootstrap网格场景下偶尔失效，手动绑定resize事件调用图表的resize()方法，强制重新计算尺寸：

修改后的JS代码：

// 初始化图表并保存实例
const myChart = new Chart(
  document.getElementById('canvas-id'), {
    type: 'bar',
    data: {
      labels: ['a', 'b', 'c'],
      datasets: [{
        data: [3, 4, 2]
      }]
    },
    options: {
      aspectRatio: 3.5,
      maintainAspectRatio: true
    }
  }
);

// 监听窗口resize，用requestAnimationFrame确保DOM更新后再重绘
window.addEventListener('resize', () => {
  requestAnimationFrame(() => {
    myChart.resize();
  });
});

补充说明 #

• requestAnimationFrame用来确保浏览器完成布局更新后再执行resize，避免图表尺寸计算偏差
• canvas的width:100% !important是为了覆盖Chart.js自动生成的内联宽度，确保它始终跟随容器宽度变化
• 容器的position: relative是为了让Chart.js的tooltip等元素能正确定位在容器范围内

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