时间线中的额外元素

默认情况下，dhtmlxGantt 会按以下顺序将时间线元素作为图层渲染：

1. 时间线的网格
2. 依赖线（Links）
3. 任务（Tasks）
4. 额外元素

Gantt 包含内置的元素，如基线（baselines）、截止日期（deadlines）和时间约束（time constraints）。除了默认的额外元素外，您还可以创建自定义元素作为额外图层。

基线（Baselines）

基线在像 Gantt 图这样的项目管理工具中起着至关重要的作用，它允许比较计划时间线与实际进度。Gantt API 提供了对基线的内置支持，使得使用这一关键特性变得更加简单。

Related sample:  Display baselines

基线自定义

如果默认的基线选项不完全符合您的项目需求，可以通过 baselines 配置项将其关闭。

gantt.config.baselines = false;

关闭后，您可以通过以下方式之一自定义基线的显示方式：

1. 使用 gantt.config.baselines 配置对象

该对象允许您在将其设置为对象时调整基线的渲染方式。它包含以下属性：

• datastore (string) - 存储基线条目的数据存储名称。相关细节请参见 getDatastore 方法。
• render_mode (boolean | string) - 控制基线的显示方式：
  • false - 隐藏基线。
  • "taskRow" - 基线显示在任务条同一行。
  • "separateRow" - 基线显示在独立的子行中，增加任务行高度。
  • "individualRow" - 每条基线在任务下方各有一行。
• dataprocessor_baselines (boolean) - 是否在更新基线时单独触发 DataProcessor。
• row_height (number) - 基线子行的高度，仅在 render_mode 为 "separateRow" 或 "individualRow" 时有效。
• bar_height (number) - 基线条的高度。

示例：

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"
    }
]

基线在弹窗（lightbox）中的管理

基线可以通过弹窗控件直接进行管理，支持在任务详情中添加、编辑和删除。

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 选项进行选择：

• 与任务同一行显示（"taskRow"）

基线直接显示在任务条旁边：

gantt.config.baselines.render_mode = "taskRow";

• 在任务下方的独立子行显示（"separateRow"）

所有基线在每个任务下方的一个子行中显示：

gantt.config.baselines.render_mode = "separateRow";

• 每条基线独立一行显示（"individualRow"）

每条基线在任务下方各有一行，便于区分：

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