Vue-Chartjs报错：Uncaught (in promise) TypeError: this.renderChart is not a function

这个错误几乎都是vue-chartjs版本不兼容导致的——v4+版本彻底重构了API，不再支持通过继承图表组件并调用this.renderChart的传统写法。以下分两种场景给出修复方案：

场景1：项目基于Vue 2 #

需要降级到适配Vue 2的vue-chartjs v3版本：

1. 重新安装依赖：

npm uninstall vue-chartjs
npm install vue-chartjs@3 chart.js

2. 你的原有代码在v3版本下可以正常运行，可选优化模板（移除canvas的固定宽高，让响应式配置生效）：

<template>
  <div style="height: 400px; width: 400px;">
    <canvas ref="donutChart"></canvas>
  </div>
</template>

<script>
import { Doughnut } from 'vue-chartjs';

export default {
  extends: Doughnut,
  name: 'donut',
  mounted() {
    const chartData = {
      labels: ['Red', 'Green', 'Blue'],
      datasets: [
        {
          backgroundColor: ['#FF5733', '#33FF57', '#3380FF'],
          data: [25, 30, 45]
        }
      ]
    };
    const chartOptions = {
      responsive: true,
      maintainAspectRatio: false
    };
    this.renderChart(chartData, chartOptions);
  }
};
</script>

场景2：项目基于Vue 3 #

使用最新的vue-chartjs v4+版本，改用组合式API写法：

1. 安装依赖：

npm install vue-chartjs chart.js

2. 推荐使用预定义组件的简洁写法：

<template>
  <div style="height: 400px; width: 400px;">
    <Doughnut :data="chartData" :options="chartOptions" />
  </div>
</template>

<script setup>
import { Doughnut } from 'vue-chartjs';
import { Chart, registerables } from 'chart.js';

// 注册Chart.js的所有核心组件
Chart.register(...registerables);

const chartData = {
  labels: ['Red', 'Green', 'Blue'],
  datasets: [
    {
      backgroundColor: ['#FF5733', '#33FF57', '#3380FF'],
      data: [25, 30, 45]
    }
  ]
};

const chartOptions = {
  responsive: true,
  maintainAspectRatio: false
};
</script>

如果需要更灵活的实例控制，也可以手动创建Chart实例：

<template>
  <div style="height: 400px; width: 400px;">
    <canvas ref="donutChart"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

const donutChart = ref(null);

onMounted(() => {
  if (donutChart.value) {
    new Chart(donutChart.value, {
      type: 'doughnut',
      data: {
        labels: ['Red', 'Green', 'Blue'],
        datasets: [
          {
            backgroundColor: ['#FF5733', '#33FF57', '#3380FF'],
            data: [25, 30, 45]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    });
  }
});
</script>

内容的提问来源于stack exchange，提问作者Corboss