vue-chartjs图表无法响应更新：如何获取实例调用update()？

问题根源分析 #

你的代码存在几个关键问题导致图表不更新：

1. 数据集路径错误：this.data.datasets.data 写法有误，datasets是数组类型，需指定具体索引（比如datasets[0].data）才能修改对应数据集的数值。
2. 组件未启用响应式监听：vue-chartjs的基础Line组件不会自动监听props变化，需要通过官方提供的reactiveProp混合实现数据响应。
3. 拼写错误：data里的option应为options，需和组件props名称对应，否则配置无法正确传递。

修正后的完整代码 #

<template>
  <div class="graph__busManag">
    <Line ref="Graph" :chart-data="ChartData" :options="options" :plugins="plugins" />
  </div>
</template>

<script>
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from "chart.js";
import { Line, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ["options", "plugins"],
  data() {
    return {
      data: {
        labels: ["一月", "二月", "三月", "四月", "五月", "六月"],
        datasets: [{
          label: "业务数据",
          data: [10,20,30,40,50,60],
          borderColor: "#42b983",
          fill: false
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
        // 你的其他配置项
      },
      plugins: []
    };
  },
  computed: {
    ChartData() {
      return this.data;
    }
  },
  mounted() {
    // 初始化图表
    this.renderChart(this.chartData, this.options, this.plugins);
    
    // 正确修改数据集并触发响应式更新
    this.data.datasets[0].data = [50, 60, 70, 80, 90, 100];
    this.data = { ...this.data };
  }
};
</script>

额外说明 #

• 引入reactiveProp混合后，组件会自动监听chart-data props的变化，无需手动调用update()或reset()。
• 若必须手动操作图表实例，需确保在图表渲染完成后执行，可借助$nextTick：

this.$nextTick(() => {
  const chartInstance = this.$refs.Graph.chart;
  chartInstance.update();
});

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