Canvas图表在Vue中无法正确重绘，数据更新后画面还是旧的怎么办？

司Des.鑫提问于 2026-02-25 12:52:21 阅读 37

交互

我在用Vue做动态图表，每次数据变了就调用drawChart()重绘Canvas，但画布上还是显示老数据，好像没刷新一样。是不是要手动清空画布？

试过在drawChart开头加clearRect，但有时候还是残留旧内容，特别是在快速切换数据的时候。

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

<script>
export default {
  methods: {
    drawChart() {
      const ctx = this.$refs.chartCanvas.getContext('2d');
      // 这里画折线图
      ctx.beginPath();
      ctx.moveTo(0, 100);
      ctx.lineTo(200, 50);
      ctx.stroke();
    }
  },
  watch: {
    chartData: {
      handler() { this.drawChart(); },
      deep: true
    }
  }
}
</script>

Canvas绘图图表可视化

我来解答赞 5 收藏

反馈

1 条解答

宇文小秋 Lv1

canvas 不会自动清空，每次 drawChart 前必须先 clearRect，而且要等 DOM 更新后再画。
改用 nextTick + clearRect 就搞定：

watch: {

  chartData: {

    handler() {

      this.$nextTick(() => {

        const ctx = this.$refs.chartCanvas.getContext('2d');

        ctx.clearRect(0, 0, this.$refs.chartCanvas.width, this.$refs.chartCanvas.height);

        this.drawChart(ctx);

      });

    },

    deep: true

  }

},

methods: {

  drawChart(ctx) {

    if (!ctx) ctx = this.$refs.chartCanvas.getContext('2d');

    ctx.beginPath();

    ctx.moveTo(0, 100);

    ctx.lineTo(200, 50);

    ctx.stroke();

  }

}

2026-02-25 13:00