优先选用ganttmaster或gantt-elastic等成熟库而非原生canvas手写甘特图，因其已解决时间映射、缩放适配、拖拽依赖、跨浏览器滚动等隐性难题；canvas方案需自行处理时区、坐标反查、导出打印等高维护成本问题。
直接用原生 HTML + Canvas 手写甘特图组件，适合轻量展示但维护成本高；真要落地项目，优先选 GanttMaster 或 gantt-elastic 这类成熟库——它们处理了时间轴缩放、拖拽依赖、父子任务嵌套、跨浏览器滚动等你八成会踩坑的细节。
为什么别从零写 Canvas 甘特图
Canvas 绘制看似简单，但实际要解决一堆隐性问题：
-
start和duration是数值，但真实业务里得映射到具体日期（比如2026-04-10），而 JS 时间戳易出错（时区、毫秒精度、闰秒） - 横向时间轴缩放时，
task.duration * 30这种硬编码像素换算会崩：放大后文字重叠，缩小后条形消失 - 鼠标 hover、点击定位任务位置，需手动做 canvas 坐标反查，没有 DOM 事件委托那么自然
- 导出图片、打印适配、键盘导航（如按方向键移动焦点）全得自己补
GanttMaster 初始化和数据加载的关键点
这个库依赖全局变量 ge，且对数据结构敏感，稍不注意就白屏或无法拖拽：
- 必须先定义
var ge = new GanttMaster();，不能晚于 DOM 加载，否则ge.loadProject()会报ge is not defined - 任务
id带"tmp_"前缀表示客户端新建，这类任务可拖拽；服务端返回的带真实 ID 的任务默认锁定，需显式设canWrite: true -
level必须严格递进：父任务level: 0→ 子任务只能是level: 1，跳级（比如突然出现level: 3）会导致缩进错乱甚至渲染崩溃 -
depends字段格式是字符串，如"7:3,8"，表示依赖任务 7 的第 3 个里程碑 + 任务 8 的结束，冒号和逗号不能写反，也不能多空格
gantt-elastic 在 Vue 中的常见报错和绕过方式
Vue 3 + gantt-elastic 组合容易卡在初始化阶段，错误通常不报在控制台，而是甘特图区域空白：
- 如果
:tasks是响应式 ref，但初始值为null或[]，组件会静默失败；必须确保首次传入的是含至少一个合法 task 对象的数组 -
:options里timeStep单位是毫秒，设成3600000（1 小时）没问题，但若误填60（以为是分钟），时间轴会密密麻麻挤满不可读 - Vue 模板中漏写
key（比如<gantt-elastic :key="tasks.length" ...></gantt-elastic>），当任务列表更新时，组件不会重绘，只刷新数据但视图不动 - 该组件内部用 MutationObserver 监听 DOM 变化，若父容器被
v-if控制显隐，切换时可能丢失监听，建议改用v-show
时间范围与编辑权限的实际限制
minEditableDate 和 maxEditableDate 看似只是数字，但影响远超边界校验：
- 它们是毫秒时间戳，不是 Date 对象，别直接传
new Date("2026-04-01")，得调.getTime()；否则甘特图可能拒绝所有拖拽操作，且无提示 - 如果
minEditableDate设得比某任务的start还晚，该任务条会变灰不可操作，但progress仍可点选修改——这个不一致行为容易被忽略 -
canWriteOnParent控制是否允许拖动子任务超出父任务时间范围，设为false时，即使父任务end是2026-05-01，你把子任务拖到2026-05-10也会被自动截断，且不触发任何回调
真正麻烦的从来不是画出条形，而是让时间、层级、依赖、权限四者咬合严丝合缝；一旦其中一环松动（比如后端返回的 level 错了一级），整个树形缩进就塌了，而且很难一眼定位问题在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
