Gantt

甘特图：把一组带起止日期的任务渲染成可拖拽的甘特条，支持按日 / 周 / 月 / 年切换视图。

最后更新 2026-10-25 19:27:08

说明

Items 给 GanttTask 列表即可，组件自动渲染——默认显示一个 3 周示例项目，宿主零数据也能跑通全流程。JS 侧由 known.gantt 驱动，底层是 frappe-gantt 1.2.2（UMD + CSS 共约 60 KB，本地离线可用），首次真正渲染才惰性注入，不看甘特图的宿主零加载成本。底部工具条可按日 / 周 / 月 / 年切换视图粒度，也可一键回到今天；拖拽甘特条调整起止日期、拖拽进度条调整完成度，订阅 OnClick / OnDateChange / OnProgressChange 即可拿到交互结果，未订阅时拖拽仍生效但不回传。ViewMode 留空默认按日，Language 默认 zh。两条边界：渲染依赖 frappe-gantt，库加载失败时组件降级为错误态；任务数极大（>500）时首次布局可能卡顿，建议分批加载。

常见能力：

frappe-gantt 1.2.2
按日 / 周 / 月 / 年视图
拖拽调整起止日期
拖拽调整进度
任务点击回调
日期变更回调
进度变更回调
回到今天
本地离线可用
内置示例兜底

用法

<Gantt Items="@tasks" Height="400px" />

@* 没有数据：用内置示例兜底 *@
<Gantt Height="400px" OnClick="@OnTask" />

@* 拖拽结果交回宿主 *@
<Gantt Items="@data" OnDateChange="@OnDate" OnProgressChange="@OnProgress" />

API 参数

参数	类型	默认值	说明
`Height`	`string`	`"400px"`	画布高度（如 "400px"）。
`Id`	`string`	`null`	容器 DOM id，留空自动生成。
`Items`	`List<GanttTask>`	`null`	甘特图数据。
`Language`	`string`	`"zh"`	语言：zh / en。默认 zh。
`OnClick`	`EventCallback<string>`	—	事件任务点击回调。
`OnDateChange`	`EventCallback<GanttDateChange>`	—	事件拖拽调整起止日期回调。
`OnProgressChange`	`EventCallback<GanttProgressChange>`	—	事件拖拽调整进度回调。
`ShowToolbar`	`bool`	`true`	是否显示工具条（视图切换 + 今天）。
`ViewMode`	`string`	`"Day"`	视图粒度：Day / Week / Month / Quarter / Year。默认 Day。
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。