Chartjs 图表在不渲染的情况下使页面在循环中变长变宽

Question

我目前正在尝试在 vue3 中启动一个基本图表。为此，我使用了两个“组件”文件： 一个名为 chartConfig.ts 的文件，其中包含：

export const data = {
  labels: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ],
  datasets: [
    {
      label: 'Data One',
      backgroundColor: '#f87979',
      data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
    }
  ]
}

export const options = {
  responsive: true,
  maintainAspectRatio: false
}

这创建了我的图表将要使用的数据。

第二个文件创建正确的图表，称为 DiagrammeBarBase.

<template>
    <Bar :data="data" :options="options" />
  </template>
  
  <script lang="ts">
  import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    BarElement,
    CategoryScale,
    LinearScale
  } from 'Chart.js'
  import { Bar } from 'vue-chartjs'
  import * as chartConfig from './chartConfig'
  
  ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
  
  export default {
    name: 'DiagrammeBarBase',
    components: {
      Bar
    },
    data() {
      return chartConfig
    }
  }
  </script>

在第三个也是最后一个文件，即应用程序文件中，我只导入

DiagrammeBarBase

并渲染它：

<script> import DiagrammeBarBase from './Components/DiagrammeBarBase.vue'</script>

<template>
<DiagrammeBarBase />
</template>

主要问题是图表似乎首先加载，但随后继续到达页面底部，变得越来越宽，无限。它还会在控制台循环中引发打字稿错误。

谁能告诉我这个错误似乎是什么？我不知道如何解决这个问题，考虑到我唯一的提示是内部打字稿错误。

我尝试在我的 vue 项目中使用 ChartJs 渲染模板图表，但它最终无限期地扩展了我的浏览器页面