这个Bootstrap 5网格布局中的 chart.js 图表在调整窗口大小时不会正确缩放：把窗口拖窄时会变小，但拖回去时却不会变大。

如何修复这个问题，使图表适应列宽并保持所需的纵横比？我更愿意不再使用任何额外的库。

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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'>
      <canvas id='canvas-id'></canvas>
    </div>
    <!-- further columns -->
  </div>
  <!-- further rows -->
</div>

解决方案

这里的问题在于，当窗口扩展时，图表无法增大，因为它所在的容器（网格行）没有空余空间；同时，容器也不会调整大小，因为内容没有增长。陷入僵局。

一种修复方法是定义一个固定高度的行，但这会在布局中留下空隙。

更好的解决方案，如下所示，是监听 window.resize 事件并以编程方式设置容器高度。这样就打破了僵局，允许图表扩展。

// ---------------
// no changes here
// ---------------
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
    }
  }
);


// -----------------------------------------------------
// add function to set container height on window resize
// -----------------------------------------------------
const chartRow = document.getElementById('row-id');
const chartCol = document.getElementById('col-id');

addEventListener('resize', (e) => {
  // calculate chart column content width
  const style = getComputedStyle(chartCol);
  const contentWidth = chartCol.clientWidth
    - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
  const rowHeight = Math.floor(contentWidth / myChart.aspectRatio);
  chartRow.style = `min-height: ${rowHeight}px;`; // use inline style
});

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

<!---------------------------------------->
<!-- add ids to chart container row/col -->
<!---------------------------------------->
<div class='container-fluid'>
  <div class='row' id='row-id'>
    <div class='col' id='col-id'>
      <canvas id='canvas-id'></canvas>
    </div>
    <!-- further columns -->
  </div>
  <!-- further rows -->
</div>