在 Chart.js 中重复创建图表时若未正确销毁旧实例，会导致 canvas 层叠、tooltip 闪烁及性能问题；根本解决方法是为每个图表使用独立变量引用，并在新建前显式调用 .destroy()。
在 chart.js 中重复创建图表时若未正确销毁旧实例，会导致 canvas 层叠、tooltip 闪烁及性能问题；根本解决方法是为每个图表使用独立变量引用，并在新建前显式调用 `.destroy()`。
在使用 Chart.js（尤其是 v2.9.4 等较早版本）开发动态图表应用时，一个常见陷阱是：每次更新数据或切换视图时，直接新建 new Chart(...) 实例，却未彻底清除前一个图表。由于多个 Chart 实例共用同一 <canvas> 元素，且 chart.destroy() 仅对持有有效引用的对象生效，若变量被重复声明（如多次使用 var chart），旧引用将丢失，导致销毁失效——最终 canvas 上残留多个图表渲染层，引发 hover 时 tooltip 抖动、图层错位、内存泄漏等问题。
✅ 正确做法：统一管理图表实例引用
推荐将图表实例存储在作用域可控的变量中（如模块级变量、对象属性或 Map），确保每次重建前能精准销毁：
// ✅ 推荐：使用 let 声明 + 显式销毁
let currentChart = null;
function renderLineChart(data) {
// 销毁已存在的图表（安全检查）
if (currentChart) {
currentChart.destroy();
}
// 创建新图表并赋值给唯一引用
currentChart = new Chart(document.getElementById('line-chart'), {
type: 'line',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: { enabled: true }
}
});
}
// 调用示例
renderLineChart({
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Sales',
data: [12, 19, 3],
borderColor: '#36A2EB'
}]
});⚠️ 关键注意事项
- 禁止重复 var chart 声明：var 存在变量提升与函数作用域问题，多次声明会覆盖引用，使前序 chart.destroy() 失效；
- 销毁前务必判空：if (currentChart) currentChart.destroy() 可防止首次渲染时报错；
- 确保 DOM 元素存在且未被移除：.destroy() 不会清理 canvas 内容，但后续绘图依赖其 DOM 状态，建议保留 <canvas> 节点；
- v3+ 用户注意：Chart.js v3 引入了 Chart.getChart(id) 和自动垃圾回收优化，但手动管理仍是最可靠方式；
- 进阶方案：在 SPA 中可结合生命周期钩子（如 Vue 的 beforeUnmount、React 的 useEffect cleanup）自动销毁，避免内存泄漏。
? 总结
图表“重叠绘制”并非 Canvas 本身缺陷，而是实例管理疏漏所致。唯一可靠的清理逻辑是：持有一个强引用 → 销毁该引用指向的实例 → 赋予新实例到同一引用。坚持这一模式，即可彻底杜绝 flicker、内存增长和交互异常，让动态图表稳定、高效、可维护。
