此功能仅在 PRO 版本中提供
默认情况下,dhtmlxGantt 会按以下顺序将时间线元素作为图层渲染:
Gantt 包含内置的元素,如基线(baselines)、截止日期(deadlines)和时间约束(time constraints)。除了默认的额外元素外,您还可以创建自定义元素作为额外图层。
基线在像 Gantt 图这样的项目管理工具中起着至关重要的作用,它允许比较计划时间线与实际进度。Gantt API 提供了对基线的内置支持,使得使用这一关键特性变得更加简单。
Related sample: Display baselines
如果默认的基线选项不完全符合您的项目需求,可以通过 baselines 配置项将其关闭。
gantt.config.baselines = false;
关闭后,您可以通过以下方式之一自定义基线的显示方式:
1. 使用 gantt.config.baselines 配置对象
该对象允许您在将其设置为对象时调整基线的渲染方式。它包含以下属性:
getDatastore
方法。false
- 隐藏基线。"taskRow"
- 基线显示在任务条同一行。"separateRow"
- 基线显示在独立的子行中,增加任务行高度。"individualRow"
- 每条基线在任务下方各有一行。render_mode
为 "separateRow"
或 "individualRow"
时有效。示例:
gantt.config.baselines = {
datastore: "baselines",
render_mode: false,
dataprocessor_baselines: false,
row_height: 16,
bar_height: 8
};
gantt.init("gantt_here");
如果您动态更改 gantt.config.baselines 的显示设置,建议使用 adjustTaskHeightForBaselines 方法,以确保基线正确显示。
const task = gantt.getTask(taskId);
gantt.adjustTaskHeightForBaselines(task); gantt.render();
2. 创建自定义基线元素 并添加到时间线中。
可以像下面这样与任务一起加载基线:
gantt.parse({
tasks: [
{
id: 2,
start_date: "2025-04-04 00:00:00",
duration: 2,
text: "Task #1",
progress: 0.5,
parent: 0,
open: true,
end_date: "2025-04-06 00:00:00",
},
// 其他任务...
],
links: [],
baselines: [ { id: 2, task_id: 2, start_date: "2025-04-03 00:00:00", duration: 2, end_date: "2025-04-05 00:00:00", }, // 其他基线... ], });
一旦加载,Gantt 会自动在时间线上显示基线,无需额外设置。
您可以使用 getTaskBaselines 方法获取指定任务的基线。
gantt.getTaskBaselines(5);
该方法返回与任务关联的基线对象数组,来源于数据存储。
[
{
task_id: 5,
id: 1,
duration: 2,
start_date: "03-04-2019 00:00",
end_date: "05-04-2019 00:00"
},
{
task_id: 5,
id: 2,
duration: 1,
start_date: "06-04-2019 00:00",
end_date: "07-04-2019 00:00"
}
]
基线可以通过弹窗控件直接进行管理,支持在任务详情中添加、编辑和删除。
gantt.config.lightbox.sections = [
{ name: "description", height: 38, map_to: "text", type: "textarea", focus: true },
{ name: "time", type: "duration", map_to: "auto" },
{ name: "baselines", height: 100, type: "baselines", map_to: "baselines" }, ];
有三种基线显示方式,可以通过 gantt.config.baselines.render_mode 选项进行选择:
基线直接显示在任务条旁边:
gantt.config.baselines.render_mode = "taskRow";
所有基线在每个任务下方的一个子行中显示:
gantt.config.baselines.render_mode = "separateRow";
每条基线在任务下方各有一行,便于区分:
gantt.config.baselines.render_mode = "individualRow";
如需在基线元素中添加自定义文本,可使用 baseline_text 模板:
gantt.templates.baseline_text = function(task, baseline, index) {
return "Baseline #" + (index + 1);
};
跟踪截止日期和任务约束对于项目成功交付至关重要。DHTMLX Gantt 提供了截止日期和约束的内置可视化,帮助提升项目时间线管理。
Related sample: Displaying deadlines
Gantt 支持 task.deadline 字段。设置后,会在图表上显示一个可视化标记,帮助监控截止日期。
gantt.parse({
data: [
{
id: 1,
text: "Task with Deadline",
start_date: "2025-04-04",
duration: 5,
deadline: new Date(2025, 3, 10), // 2025年4月10日 },
// 其他任务...
],
});
如果默认的截止日期功能不符合您的需求,可以通过 deadlines 选项将其禁用。
gantt.config.deadlines = false;
关闭后,您可以通过创建自定义截止日期元素来添加到时间线中。
gantt.config.deadlines 设置用于切换截止日期元素的显示。当启用时,Gantt 会检查 task.deadline 属性,如果包含有效日期,则在时间线上显示截止日期标记。
自 v9.0 起,当自动调度启用并处于约束模式(auto_scheduling_compatibility 设置为 false)时,Gantt 会自动在图表上显示约束日期。
gantt.parse({
data: [
{
id: 1,
text: "Task #1",
start_date: "2025-04-04",
duration: 4,
constraint_date: "2025-04-04",
constraint_type: "snet",
parent: 0
},
// 其他任务
]
})
您可以通过 auto_scheduling 配置中的 show_constraints
选项来控制约束的显示。默认情况下约束是可见的,但可以通过将 show_constraints
设置为 false
隐藏:
gantt.config.auto_scheduling = {
enabled: true,
show_constraints: false
};
Related sample: Auto-Schedule From Project Start & Constraints
Back to top