Примеры Форум Поддержка
Документация
СтартРуководстваНастройка Задач

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

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

В dhtmlxGantt область таймлайна организована в слои, которые рендерятся в определенном порядке:

  1. Грид таймлайна
  2. Связи
  3. Задачи
  4. Дополнительные элементы

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

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

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

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

Related sample:  Display baselines

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

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

    Режим индивидуальной строки

Установка текста базовой линии

Чтобы добавить пользовательский текст внутри элемента базовой линии, вы можете использовать шаблон gantt.templates.baseline_text:

gantt.templates.baseline_text = function(task, baseline, index) {
    return "Baseline #" + (index + 1);
};

Дедлайны и ограничения

Управление дедлайнами и понимание ограничений задач являются важными для поддержания проектов на правильном пути. DHTMLX Gantt предлагает встроенные функции для визуализации дедлайнов и ограничений, что упрощает управление таймлайнами проектов.

Дедлайны

Related sample:  Displaying deadlines

Визуализация дедлайнов

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

gantt.parse({
  data: [
    {
      id: 1,
      text: "Task with Deadline",
      start_date: "2025-04-04",
      duration: 5,
      deadline: new Date(2025, 3, 10), // 10 апреля 2025 года     },
    // Дополнительные задачи...
  ],
});

Настройка дедлайнов

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

gantt.config.deadlines = false;

Оттуда вы можете создать пользовательский элемент дедлайна, чтобы он соответствовал вашему таймлайну.

Настройка gantt.config.deadlines определяет, отображаются ли элементы дедлайнов для задач. Если включено, Gantt проверяет свойство task.deadline и отображает действительные даты на таймлайне.

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

Начиная с версии 9.0, когда автоматическое планирование активно в режиме Constraint (с gantt.config.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 в gantt.config.auto_scheduling. По умолчанию ограничения видимы, но вы можете скрыть их, установив show_constraints в false:

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

Related sample:  Auto-Schedule From Project Start & Constraints

К началу