这种情况我在使用Chart.js开发时也碰到过，核心问题基本出在销毁不彻底或者数据集引用残留这两个点上，咱们一步步拆解解决：

可能的原因 #

• destroy() 执行时序问题：Chart.js的destroy()方法理论上会清除图表实例和关联的Canvas上下文，但如果在销毁动作还没完成时就立刻创建新实例，DOM渲染的滞后性会导致旧数据集残留。
• Options对象引用未重置：如果你的options.datasets复用了同一个数组对象，哪怕你修改了数据，浅拷贝的特性会让旧数据依然留在内存里，新图表实例会意外读取到这些残留数据。
• Canvas上下文未完全清空：即使调用了destroy()，Canvas的绘图上下文可能还残留着旧的像素数据，导致旧内容没被新图表完全覆盖。

解决方案 #

1. 确保销毁完成后再创建新实例 #

可以在destroy()后通过微任务延迟创建，给DOM足够的更新时间：

// 先销毁旧实例
if (this.chart) {
  this.chart.destroy();
  this.chart = null;
  // 用setTimeout触发微任务，确保销毁动作完成
  setTimeout(() => {
    this.chart = new Chart(node, {
      ...options,
      datasets: [...newDatasets] // 创建新数组，避免引用旧数据
    });
    // 后续添加数据的逻辑
  }, 0);
}

2. 重置数据集为全新引用 #

每次创建图表时，不要直接复用旧的options.datasets，而是生成一个全新的数组对象：

// 错误：复用旧数组，导致引用残留
const badOptions = { datasets: this.oldDatasetArray };

// 正确：创建新数组，深拷贝数据（简单数据用展开运算符即可）
const goodOptions = {
  ...options,
  datasets: [...newDatasetArray] 
  // 如果是复杂对象，用JSON.parse(JSON.stringify(newDatasetArray))做深拷贝
};
this.chart = new Chart(node, goodOptions);

3. 手动清空Canvas上下文兜底 #

如果上面的方法还没解决，可以在销毁后手动清空Canvas的绘图状态：

if (this.chart) {
  this.chart.destroy();
  this.chart = null;
  // 获取上下文并彻底清空
  const ctx = node.getContext('2d');
  ctx.clearRect(0, 0, node.width, node.height);
  ctx.reset(); // 重置上下文的所有状态
}
// 再创建新图表
this.chart = new Chart(node, freshOptions);

完整的标准流程示例 #

// 封装一个可靠的图表更新方法
updateChart = (node, newChartData) => {
  // 1. 安全销毁旧实例
  if (this.chart) {
    this.chart.destroy();
    this.chart = null;
  }

  // 2. 准备完全独立的新配置
  const freshConfig = {
    type: 'bar', // 替换成你的图表类型
    data: {
      labels: newChartData.labels,
      datasets: [
        {
          label: '最新数据集',
          data: newChartData.values,
          backgroundColor: '#36A2EB'
          // 其他样式配置
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
      // 你的自定义选项
    }
  };

  // 3. 创建新图表实例
  this.chart = new Chart(node, freshConfig);
};

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