HTML本身不能画基线，需借助frappe-gantt等库实现：在任务数据中添加baseline字段（ISO格式日期对象），支持静态灰色虚线渲染，但不支持交互或自动偏差着色。
HTML 甘特图里怎么画基线（Baseline）？
纯 HTML 本身不支持甘特图，更不支持基线——你得靠 JavaScript 库实现。真正能跑起来的方案，基本只有两个：用 Chart.js 配合插件（如 chartjs-chart-gantt），或用专业甘特图库如 frappe-gantt、timeline-gantt。其中 frappe-gantt 最轻量、开箱即用，且原生支持基线渲染（叫 baseline 字段），推荐从它入手。
frappe-gantt 怎么加基线任务？
它把基线当作一类特殊任务处理：在原始任务数据中，给某条任务加一个 baseline 字段，值为另一个日期区间对象。这个对象必须含 start 和 end（ISO 格式字符串，如 "2024-03-10"），不能是 Date 实例。
-
baseline字段只对单条任务生效，不是全局配置 - 起止时间必须早于/晚于主任务时间，否则视觉上会重叠难区分
- 默认基线是灰色虚线，颜色和样式可通过 CSS 覆盖
.bar.baseline类 - 不支持基线拖拽或交互，仅作静态参考
const tasks = [{
id: 'task-1',
name: '开发登录模块',
start: '2024-03-15',
end: '2024-03-25',
baseline: { start: '2024-03-12', end: '2024-03-22' }
}]
基线和当前计划对比时常见错在哪？
最常踩的坑是时间格式不一致：后端传来的 baseline.start 如果是 "2024/03/12" 或带时分秒（"2024-03-12T09:00:00"），frappe-gantt 会静默忽略该基线，图表上什么也不画——控制台也无报错。
- 务必统一用
YYYY-MM-DD格式，可用date.toISOString().split('T')[0]标准化 - 如果基线时间跨年但主任务没跨年，注意检查是否因月份补零缺失（如
"2024-3-5"无效） - 多个任务都有基线时，别复用同一个对象引用，否则修改一个会影响全部
想高亮偏差区域（比如延迟天数）怎么办？
frappe-gantt 不提供自动偏差计算或着色。你需要自己算出偏移量，在任务数据里加自定义字段（如 delayDays），再通过 on_click 回调或 tooltip 显示；或者用 CSS 选择器定位特定任务的 bar 元素，手动加 class 并设背景色。
立即学习“前端免费学习笔记（深入）”；
例如：基线结束是 2024-03-22，当前计划结束是 2024-03-25，差 3 天，可这样标：
tasks[0].delayDays = 3;
// 然后在初始化后：
document.querySelector('.bar[data-id="task-1"]').classList.add('delay-3');
后续用 CSS 控制 .bar.delay-3 的边框或阴影即可。真要动态染色整段超期区间，就得改源码或换 D3.js 自研——那已超出“HTML 做甘特图”的实用边界了。
基线本质是项目快照，不是实时比对工具。时间一长，没人维护基线数据，图就只剩装饰性了。
