频繁调用 anychart.ganttResource() 创建新图表实例会导致浏览器无法释放旧实例内存，引发持续增长的内存占用和页面卡顿；正确做法是复用图表对象，仅通过 chart.data() 更新数据并调用 chart.fitAll() 重绘。
频繁调用 `anychart.ganttresource()` 创建新图表实例会导致浏览器无法释放旧实例内存，引发持续增长的内存占用和页面卡顿；正确做法是复用图表对象，仅通过 `chart.data()` 更新数据并调用 `chart.fitall()` 重绘。
在使用 AnyChart 构建动态甘特图（尤其是资源甘特图 ganttResource）时，若需每秒从服务端拉取最新调度数据并刷新图表，绝对避免在定时器中反复执行 anychart.ganttResource() + chart.container(...).draw() —— 这会不断创建全新图表实例，而旧实例因仍被事件监听器、内部缓存或闭包引用而无法被垃圾回收，最终导致内存持续攀升、页面冻结。
✅ 正确实践：单次初始化 + 数据驱动更新
核心原则是「只创建一次图表实例」，后续所有刷新均通过数据更新完成：
-
初始化阶段：在
anychart.onDocumentReady中创建chart实例、绑定容器、首次渲染； -
刷新阶段：每次获取新数据后，仅调用
chart.data(newTreeData)更新底层数据源，并可选调用chart.fitAll()自动适配时间轴宽度； -
无需手动清空 DOM：
chart.data()会自动触发重绘，document.getElementById("container").innerHTML = ""不但多余，还可能破坏图表内部 DOM 引用关系，加剧内存问题。
以下是优化后的完整示例（已精简逻辑，聚焦内存安全）：
anychart.onDocumentReady(function() {
// 1. 初始化图表（仅执行一次）
var chart = anychart.ganttResource();
chart.container('container').draw();
// 2. 初始化空数据树（占位）
var treeData = anychart.data.tree([], 'as-tree');
chart.data(treeData);
// 3. 定义安全的数据刷新函数
function refreshGanttData() {
// 模拟异步请求（实际中替换为 fetch/AJAX）
fetch('../scheduler?type=getschedule')
.then(response => response.json())
.then(data => {
// ✅ 关键：复用原 chart 实例，仅更新数据
var newTreeData = anychart.data.tree(data, 'as-tree');
chart.data(newTreeData);
chart.fitAll(); // 可选：确保时间轴自动缩放
})
.catch(err => console.error('Failed to load schedule:', err));
}
// 4. 启动定时刷新（推荐 2–5 秒间隔，避免过度请求）
setInterval(refreshGanttData, 2000); // 每2秒刷新一次
});
? 重要注意事项：
-
禁止销毁重建：切勿在定时器中调用
chart.dispose()或重新执行anychart.ganttResource()；dispose()仅应在组件卸载时调用（如 SPA 路由离开），且需确保无残留引用。 -
避免全局变量污染：将
chart和treeData保持在闭包作用域内，防止意外被其他脚本修改。 -
服务端响应优化：确保
/scheduler?type=getschedule返回轻量 JSON（仅含必要字段），避免传输冗余数据加重解析负担。 -
错误降级处理：网络失败时应保留上一版有效数据（如不调用
chart.data()），而非渲染空图或报错中断。
通过该方案，图表生命周期完全可控，内存占用稳定在合理区间，即使长时间运行（数小时）也不会出现性能劣化——这才是 AnyChart 动态数据场景下的最佳实践。
