Дополнительные элементы на таймлайне

информация

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

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

1. грид таймлайна
2. ссылки
3. задачи
4. дополнительные элементы

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

Базовые линии

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

Отображение базовых линий

Настройка базовых линий

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

gantt.config.baselines = false;

После этого можно настроить отображение базовых линий одним из следующих способов:

1. Использование конфигурационного объекта gantt.config.baselines

Опция конфигурации baselines позволяет настраивать рендеринг базовых линий на диаграмме Gantt, если она задана как объект. Объект конфигурации содержит следующие свойства:

• 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", /*!*/
    }, /*!*/
    // Дополнительные базовые линии... /*!*/
  ], /*!*/
});

После загрузки базовые линии будут автоматически отображаться на таймлайне без дополнительной конфигурации.

Получение базовых линий задачи

Вы можете получить базовые линии указанной задачи с помощью метода 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

Вы можете управлять базовыми линиями через элемент 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 предлагает три режима отображения базовых линий. Вы можете выбрать режим отображения, который лучше соответствует вашим потребностям, установив конфигурационную опцию 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 предоставляет встроенную визуализацию сроков и ограничений, что повышает эффективность управления временными рамками проекта.

Отображение сроков

Визуализация сроков

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 и, если оно содержит действительную дату, элемент срока будет отображаться на таймлайне.

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

Начиная с версии 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
    },
    // Дополнительные задачи
  ]
})

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

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

Автоматическое планирование от начала проекта и ограничений