在 chart.js 中重复创建图表时，若未妥善销毁旧实例，会导致多个图表叠加渲染于同一 canvas，引发 tooltip 闪烁、性能下降甚至内存泄漏；关键在于为每个图表分配独立引用并显式调用 destroy()。
在 chart.js 中重复创建图表时，若未妥善销毁旧实例，会导致多个图表叠加渲染于同一 canvas，引发 tooltip 闪烁、性能下降甚至内存泄漏；关键在于为每个图表分配独立引用并显式调用 destroy()。
Chart.js 的
✅ 正确做法是：为每个图表维护唯一、可访问的引用，并在创建新图表前确保旧图表被彻底销毁。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
1. 使用对象或 Map 管理图表引用（推荐）
// 全局图表管理器（例如按容器 ID 映射图表实例）
const chartRegistry = new Map();
function renderLineChart(containerId, config) {
// 1. 销毁已存在的同容器图表
if (chartRegistry.has(containerId)) {
const oldChart = chartRegistry.get(containerId);
oldChart.destroy();
chartRegistry.delete(containerId);
}
// 2. 创建新图表并注册引用
const ctx = document.getElementById(containerId).getContext('2d');
const chart = new Chart(ctx, config);
chartRegistry.set(containerId, chart);
return chart;
}
// 使用示例
renderLineChart('line-chart', {
type: 'line',
data: { /* ... */ },
options: { /* ... */ }
});
2. 若仅需单图表，确保变量作用域可控
避免在函数作用域内重复声明同名 var chart（ES5+ 中 var 存在变量提升与函数作用域问题）：
// ❌ 错误：每次调用都新建 var chart，旧引用丢失
function createChart() {
if (chart) chart.destroy(); // ReferenceError: chart is not defined
var chart = new Chart(...); // 每次都是新声明，无法访问上一次实例
}
// ✅ 正确：使用 let/const + 外部引用或闭包
let currentChart = null;
function createChart() {
if (currentChart) {
currentChart.destroy(); // 安全调用
}
currentChart = new Chart(document.getElementById('line-chart'), { /* ... */ });
}
3. 注意事项与最佳实践
- Canvas 复用安全：Chart.js 允许复用同一
- DOM 准备就绪：确保 document.getElementById() 返回有效 canvas 元素，建议在 DOMContentLoaded 或组件挂载后执行；
- 响应式重绘：若页面尺寸变化，优先调用 chart.resize() 而非重建；仅当配置/数据结构变更时才需销毁重建；
- 内存监控：在开发环境可检查 chartRegistry.size 或浏览器内存面板，验证销毁是否生效。
通过规范图表生命周期管理，不仅能彻底解决 flickering 和叠加问题，还能提升应用稳定性与可维护性。记住：不是 canvas 需要清理，而是 Chart 实例需要被主动释放。
