Дополнительные элементы на временной шкале

Эта функция доступна только в PRO-версии

По умолчанию dhtmlxGantt отображает элементы временной шкалы слоями в следующем порядке:

Грид временной шкалы
Связи
Задачи
Дополнительные элементы

В Gantt входят встроенные элементы, такие как базовые планы (baselines), крайние сроки (deadlines) и ограничения по времени (constraints). Помимо стандартных дополнительных элементов, вы также можете создавать пользовательские элементы в виде дополнительных слоев.

Базовые планы (Baselines)

Базовые планы играют важную роль в инструментах управления проектами, таких как диаграммы Ганта, позволяя сравнивать запланированные сроки с фактическим ходом выполнения. API Gantt предоставляет встроенную поддержку базовых планов, что облегчает работу с этой важной функцией.

Встроенные базовые планы

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

Базовые планы в лайтбоксе

Базовые планы можно управлять напрямую через элемент управления лайтбоксом, добавляя, редактируя и удаляя их в деталях задачи.

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";

Режим task row

В отдельной подстроке под задачей ("separateRow")

Все базовые планы отображаются в одной подстроке под каждой задачей:

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

Режим subrow

В индивидуальной подстроке ("individualRow")

Каждый базовый план отображается в собственной подстроке для более наглядного отображения:

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

Режим individual row

Настройка текста базового плана

Чтобы добавить пользовательский текст внутрь элементов базового плана, используйте шаблон 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), // April 10, 2025     },
    // Дополнительные задачи...
  ],
});

Настройка крайних сроков

Если стандартная функция крайних сроков не подходит для вашего случая, вы можете отключить её с помощью опции deadlines.

gantt.config.deadlines = false;

После отключения вы можете настроить отображение крайних сроков, создав собственный элемент для крайних сроков и добавив его на временную шкалу.

Параметр gantt.config.deadlines управляет отображением элементов крайних сроков. Если включено, Gantt проверяет свойство task.deadline, и если оно содержит корректную дату, маркер крайнего срока появляется на временной шкале.

Ограничения задач

Начиная с версии 9.0, когда включено автоматическое планирование и оно работает в режиме Constraint (при 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
    },
    // Дополнительные задачи
  ]
})

Вы можете управлять отображением ограничений с помощью опции show_constraints в конфиге auto_scheduling. По умолчанию ограничения отображаются, но их можно скрыть, установив show_constraints в false:

gantt.config.auto_scheduling = {
  enabled: true,
  show_constraints: false
};

К началу