甘特图区块

区块:甘特图社区版+

介绍

甘特图区块以时间轴展示记录的起止时间和进度,适合项目计划、任务排期、里程碑跟踪等需要按时间查看任务跨度的场景。

安装

该区块为内置插件,无需额外安装。

添加区块

选择「甘特图」区块并指定数据表后,在弹窗中配置甘特图需要用到的字段:

  1. 选择「标题字段」,用于显示任务名称
  2. 选择「开始日期字段」,用于确定任务开始时间
  3. 选择「结束日期字段」,用于确定任务结束时间
  4. 按需选择「进度字段」,用于显示和拖拽更新任务进度
  5. 按需选择「颜色字段」,用于区分不同任务
  6. 选择「时间缩放等级」,用于控制时间轴颗粒度

配置完成后,即可创建甘特图区块。

区块配置项

甘特图字段

甘特图字段用于决定记录如何映射到时间轴任务。

其中:

  • 「标题字段」决定任务条上显示的名称
  • 「开始日期字段」决定任务条的开始位置
  • 「结束日期字段」决定任务条的结束位置
  • 「进度字段」决定任务条内部的进度显示
  • 「颜色字段」决定任务条颜色
  • 「时间缩放等级」决定时间轴按小时、天、周、月等颗粒度展示

标题字段

用于显示任务名称。通常选择任务名称、项目名称、标题等字符串字段。

开始日期字段

用于指定任务开始时间。甘特图区块会根据该字段把任务放到时间轴对应位置。

结束日期字段

用于指定任务结束时间。开始日期和结束日期相同时,任务会显示为较短的时间段。

进度字段

用于展示任务完成进度,并支持通过拖拽任务条上的进度手柄来更新。

进度字段使用浮点数字段,数据按 01 存储,甘特图中会显示为百分比。比如 0.6 会显示为 60%

颜色字段

用于设置任务条颜色,便于区分不同类型、状态或优先级的任务。

颜色字段支持:

  • 下拉单选字段
  • 颜色字段

如果使用下拉单选字段,甘特图会优先复用选项中配置的颜色。

时间缩放等级

用于控制时间轴的展示颗粒度。

当前支持:

  • 小时
  • 一天的四分之一
  • 半天
  • 季度

任务跨度较短时,可以使用小时、半天或天。任务跨度较长时,可以使用周、月、季度或年。

表格显示

开启后,甘特图区块左侧会显示表格区域。你可以在表格里配置字段列,用来展示任务的关键属性。

关闭后,区块只显示右侧时间轴,适合页面空间较紧或只需要查看排期的场景。

表格宽度

用于设置左侧表格区域的宽度。只有开启「表格显示」后,该配置项才会出现。

如果表格字段较多,可以适当调宽表格宽度。如果只保留少量字段,可以缩小宽度,把更多空间留给时间轴。

启用拖动重新排期

开启后,可以在时间轴中拖动任务条来调整开始日期和结束日期。

其中:

  • 拖动整个任务条,会同时调整开始日期和结束日期
  • 拖动任务条两侧手柄,会调整开始日期或结束日期
  • 拖动进度手柄,会更新进度字段

如果不希望用户直接在甘特图中修改排期,可以关闭该选项。

默认定位到今天

开启后,甘特图区块首次显示时会自动滚动到今天所在的位置。

这个选项适合任务跨度较长的项目。打开页面时,用户可以先看到当前时间附近的任务。

事件弹窗设置

用于配置点击任务条后的打开方式。

可以配置:

  • 打开方式,比如抽屉、对话框或页面
  • 弹窗尺寸
  • 弹窗模板

点击任务条后,NocoBase 会按这里的配置打开当前记录,便于查看或编辑任务详情。

数据范围

用于限制甘特图区块中显示的数据范围。

比如:只显示当前项目下的任务,或只显示未完成任务。

更多内容参考 数据范围

分页数量

用于控制每页加载的记录数量。记录较多时,可以通过分页切换查看更多任务。

显示行号

开启后,左侧表格会显示行号,便于在任务较多时快速定位记录。

树表格

如果当前数据表是树表,甘特图区块可以开启树表格模式。开启后,左侧表格会按父子层级展示记录,右侧时间轴也会按同样的层级展示任务。

树表格模式下,还可以配置「默认展开全部行」。

配置字段

左侧表格区域使用表格列来展示记录字段。

添加字段

开启「表格显示」后,可以在左侧表格中添加字段列。字段配置项可参考 表格列

操作列

甘特图区块默认包含操作列。你可以在操作列中添加查看、编辑、删除等记录操作。

如果已经配置了「事件弹窗设置」,也可以直接点击右侧任务条打开记录详情。

配置操作

甘特图区块支持在顶部配置全局操作,具体可见的操作类型会随当前环境中已启用的动作能力而变化。

内置操作

  • 「今天」:快速滚动到今天所在的位置
  • 「展开/收起」:树表格模式下展开或收起全部行

全局操作