Chart.js 在 Bootstrap 网格中如何随列宽缩放并保持宽高比？

2026-11-04数据阿明

给 canvas 加一个专用父容器，设置 position: relative，让容器宽度跟随 Bootstrap 列宽。同时保留 maintainAspectRatio: true 和 aspectRatio: 3.5，无需引入其他库。

为什么需要调整父容器？

Chart.js 根据父容器的尺寸调整画布。响应式布局要求父容器采用相对定位，并专门用于承载图表。原代码直接将 canvas 放在 .col 中，没有明确设置这样的容器，建议先补上。相关要求见 Chart.js 响应式图表文档。

Bootstrap 的默认网格基于 Flexbox。还可以为承载图表的列设置 min-width: 0，避免内容的最小宽度影响列收缩。Chart.js 的 Flexbox / Grid 布局说明中也有这一建议。

修改后的代码

保留现有依赖，将布局和初始化代码改为：

<style>
  .chart-column {
    min-width: 0;
  }

  .chart-container {
    position: relative;
    width: 100%;
  }
</style>

<div class="container-fluid">
  <div class="row">
    <div class="col chart-column">
      <div class="chart-container">
        <canvas id="canvas-id"></canvas>
      </div>
    </div>
    <!-- further columns -->
  </div>
  <!-- further rows -->
</div>

<script>
  const chart = new Chart(document.getElementById('canvas-id'), {
    type: 'bar',
    data: {
      labels: ['a', 'b', 'c'],
      datasets: [{
        data: [3, 4, 2]
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      aspectRatio: 3.5
    }
  });
</script>

responsive 默认为 true，这里显式写出是为了便于确认配置。aspectRatio: 3.5 表示画布的宽高比为 3.5:1，高度会随宽度变化。详见 Chart.js 配置说明。

仍然无法放大时检查什么？

在浏览器开发者工具中观察 .chart-container，检查重新拉宽窗口时，它的实际宽度是否增加。如果容器没有变宽，继续检查祖先元素的固定宽度、max-width 或其他布局限制。图表只能使用父容器提供的空间。

不要给 canvas 写死 height 属性或 CSS 高度，否则 aspectRatio 可能被忽略。这里需要让宽度决定高度，保留上述配置即可，无需改成 maintainAspectRatio: false。Chart.js 文档说明了显式高度对宽高比配置的影响。

现有片段不足以确认完整页面中是否还有其他样式干扰。修改后应实际拉窄再拉宽窗口，检查两个方向的变化，确认容器宽度和画布尺寸都能同步恢复。