响应图表不受控制地增长

Question

我有一个 vue 组件，它实现了 vue-chartjs 的 Horizo​​ntalBar 组件，我将其渲染为 bootstrap-vue 表中的单元格。我的愿望是让图表保持固定的高度，但随着窗口的增大/缩小而水平缩放。

当页面首次加载时，图表播放得很好，但在调整大小以覆盖页面上的其他元素时，图表会不受控制地增长。

我怎样才能让他们做出正确的反应而不让他们去不该去的地方？我还想确保它们实际上占据了它们所在的表格单元格的范围，而不是奇怪地停止了几个像素。

这是我的相关组件代码：

<script>
import { HorizontalBar } from "vue-chartjs";
import Constants from "../../services/Constants";

export default {
  name: "ResponseGraph",
  extends: HorizontalBar,
  props: { /* some props */ },
  data: () => ({
    chartData: {},
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{ stacked: true, display: false }],
        yAxes: [{ stacked: true, display: false }]
      },
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
      }
    }
  }),
  mounted() {
    this.chartData = {
      datasets: [
        // some data
      ]
    };
    this.renderChart(this.chartData, this.options);
  }
};
</script>

以及我如何在表代码中使用它：

      <template v-slot:cell(graph)="data">
        <response-graph
          :correct="data.item.correct"
          :incorrect="data.item.incorrect"
          :omitted="data.item.omitted"
          :height="20"
        />
      </template>