向固定尺寸容器新增Chart.js图表时实现动态自适应调整的技术问询

大家好，我最近在用Vue3结合vue-chartjs的Doughnut组件做图表展示功能，需求是在一个固定尺寸的容器里动态添加多个环形图表。

目前我写了以下代码，页面挂载时会添加几个图表，但遇到了头疼的问题：动态新增的图表没办法很好地自适应容器尺寸，要么显示被截断，要么布局乱掉。我已经给Chart的options设置了responsive: true和maintainAspectRatio: false，容器也加了对应的样式类，但效果还是不对。

下面是我的核心代码：

脚本部分 #

function addChart(key, colors) {
  const chartData = getChartData(currentYear.value, key);

  const chart = {
    chart: null,
    data: chartData,
    colors: colors,
    key: key
  };

  charts.value.push(chart);
}

onMounted(async () => {
  addChart("key1", colors1);
  addChart("key2", colors1);
  addChart("key3", colors1);
});

模板部分 #

<template>
  <div id="main">
    <div id="chartContainers" class="chart-container">
      <div v-for="(chartData, index) in charts" :key="index" class="chart-wrapper">
        <div class="chart-title">{{ chartData.key }}</div>
        <div class="canvas-container">
          <Doughnut
              :data="{ labels: ['A', 'B', 'C'], datasets: [{ data: chartData.data, backgroundColor: chartData.colors }] }"
              :options="{ responsive: true, maintainAspectRatio: false, animation: { duration: 0 } }"
          />
        </div>
      </div>
    </div>
  </div>
</template>

想请教一下各位，有没有什么办法能让这些动态添加的Chart.js图表，在固定尺寸的容器里实现正确的自适应调整？麻烦大家帮忙看看，谢谢啦！

备注：内容来源于stack exchange，提问作者dreanor