Vue+TypeScript集成Chart.js时setup函数执行报错求助

问题分析 #

从代码和错误信息来看，有三个核心问题导致初始化失败：

• ID大小写不匹配：模板里canvas的id是mychart（全小写），但代码里用document.getElementById("myChart")（驼峰），导致获取到的ctx为null，调用getContext时抛出错误。
• 生命周期时机不对：setup函数执行时组件还没挂载到DOM，直接用document.getElementById根本找不到元素。
• 冗余的上下文获取：Chart.js支持直接传入canvas元素作为初始化参数，没必要手动调用getContext('2d')。

修正后的完整代码 #

SimpleGraph.vue #

<template>
  <div>
    <canvas ref="chartCanvas" width="400" height="400"></canvas>
  </div>
</template>

<script lang="ts">
import { Chart } from "chart.js";
import { defineComponent, ref, onMounted, onUnmounted } from "vue";

export default defineComponent({
  name: "SimpleGraph",
  setup() {
    // 用ref绑定canvas元素
    const chartCanvas = ref<HTMLCanvasElement | null>(null);
    let chartInstance: Chart | null = null;

    // 在DOM挂载完成后初始化图表
    onMounted(() => {
      if (!chartCanvas.value) return;
      
      chartInstance = new Chart(chartCanvas.value, {
        type: "line",
        data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
            {
              label: "# of Votes",
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                "rgba(255, 99, 132, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(255, 206, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
                "rgba(153, 102, 255, 0.2)",
                "rgba(255, 159, 64, 0.2)",
              ],
              borderColor: [
                "rgba(255, 99, 132, 1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
                "rgba(153, 102, 255, 1)",
                "rgba(255, 159, 64, 1)",
              ],
              borderWidth: 1,
            },
          ],
        },
        options: {
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      });
    });

    // 组件卸载时销毁图表实例，避免内存泄漏
    onUnmounted(() => {
      chartInstance?.destroy();
    });

    return { chartCanvas };
  },
});
</script>

<style scoped></style>

核心修改点 #

1. 用Vue ref替代原生DOM查询：避免ID大小写问题，同时符合Vue的组件规范。
2. 延迟初始化到onMounted：确保DOM已经渲染完成，能正确获取到canvas元素。
3. 简化Chart初始化参数：直接传入canvas元素，无需手动获取2D上下文。
4. 添加卸载清理逻辑：防止组件卸载后Chart实例残留导致内存泄漏。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo