Vue ChartJS页面刷新时无法渲染问题求助

安全阿岳

2026-5-8

解决Vue中Chart.js页面刷新后图表消失的问题

我完全懂你现在的头疼——页面一刷新图表就没影了，只有手动调整容器宽高才会出来，试了Vue的watch和mixins也不管用对吧？我之前在项目里也碰到过一模一样的chart.js响应式渲染问题，咱们来一步步把它解决掉。

问题根源分析

你的代码里有两个关键的小问题：

你直接在chartData的数组里用push添加数据，Vue的响应式系统虽然能检测到数组push，但chart.js的实例可能没法正确感知到这种内部变化；
你的watch是浅监听chartData对象，对于对象内部的数组元素修改，默认不会触发watch回调。

具体修复方案

1. 给ChartContainer的watch加上深度监听

修改ChartContainer.js里的watch配置，开启深度监听来捕获数组和对象内部的变化：

import { Line, mixins } from 'vue-chartjs'
export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  },
  watch: {
    chartData: {
      handler() {
        // 先销毁旧的图表实例，避免重复渲染冲突
        if (this.chart) {
          this.chart.destroy();
        }
        this.renderChart(this.chartData, this.options)
      },
      deep: true // 开启深度监听，捕获数组和对象内部变化
    }
  }
}

2. 替换数组而非直接push，触发明确的响应式更新

在Dashboard.vue的getListData方法里，不要直接push到现有数组，而是创建新数组后直接替换原数组，让Vue的响应式系统清晰地检测到数据变化：

methods: {
  getListData() {
    axios
      .get("http://localhost/MyComposer/", {
        params: {
          answerId: 6,
          token: this.token,
        },
      })
      .then((response) => {
        const newLabels = [];
        const newDataPoints = [];
        
        response.data.forEach(item => {
          const fullName = `${item.FirstName} ${item.MiddleName} ${item.LastName}`;
          newLabels.push(`${fullName} (${item.TestName})`);
          newDataPoints.push(item.Score);
        });
        
        // 直接替换整个数组，触发响应式更新
        this.chartData.labels = newLabels;
        this.chartData.datasets[0].data = newDataPoints;
      })
      .catch(error => {
        console.log(error);
      });
  },
},

3. 给图表容器设置明确的尺寸

因为你设置了maintainAspectRatio: false，chart.js需要容器有明确的宽高才能正确渲染。修改Dashboard.vue的模板，给父容器和图表组件设置确定的尺寸：

<template>
  <div align="center" style="width: 100%; height: 400px;">
    <LineChart :chartData="chartData" :options="options" style="width:100%;height:100%;" />
  </div>
</template>

为什么这些改动有效？

深度监听确保watch能捕获到chartData内部数组的变化；
替换数组而非push，让Vue的响应式系统能立刻感知到数据更新，进而触发图表重渲染；
明确的容器尺寸解决了chart.js在页面加载时无法计算渲染空间的问题；
销毁旧图表实例避免了多次渲染导致的内存泄漏和渲染冲突。

按照这些步骤修改后，页面刷新时图表应该就能正常响应式渲染了，你可以试试看！

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