Обзор DHTMLX Gantt
DHTMLX Gantt - это JavaScript-компонент для отображения и редактирования проектных таймлайнов в браузере.
Он сочетает настраиваемую таблицу, масштабируемую временную шкалу и планировщик, который учитывает рабочее время, зависимости и ограничения.
С его помощью можно создавать представления для управления проектами и ресурсами, графики строительства и производства, планирование полевых работ и любые приложения, которым требуется визуальная временная линия проекта.
DHTMLX Gantt доступен в редакциях Standard и PRO. PRO-версия включает такие функции, как авто-планирование, критический путь, управление ресурсами, динамическая загрузка и многое другое.
Быстрый старт по фреймворкам
Вы можете использовать DHTMLX Gantt как ванильный JavaScript-виджет или интегрировать его в современные фреймворки. Начните со пошагового руководства, подходящего для вашего стека:
Минимальная настройка через script-теги или сборщики. Отлично подходит для простых страниц или приложений без фреймворков.
Используйте готовый компонент ReactGantt с пропсами и событиями.
Интегрируйте Gantt в Angular-проекты с помощью тонкого обёрточного компонента.
Добавьте диаграмму Ганта в Vue-приложения с небольшим wrapper-компонентом и реактивными пропсами.
Используйте Gantt в Svelte через простой компонент, который связывает конфигурацию и события.
Встраивайте базовый виджет Gantt в собственные компоненты для полного контроля жизненного цикла и потоков данных.
Встраивайте Gantt в приложения Salesforce, подключайте данные вашей организации и управляйте проектными таймлайнами в CRM.
Живые демо
Чтобы увидеть DHTMLX Gantt в действии, откройте онлайн-демо:
- Базовая диагр амма Ганта с задачами и связями.
- Примеры авто-планирования и критического пути.
- Управление ресурсами: диаграмма и гистограмма.
- Просмотреть все примеры, чтобы оценить полный набор функций.
Основные возможности
DHTMLX Gantt сочетает в себе планировщик, гибкую временную шкалу и инструменты работы с ресурсами. Ниже приведены основные области с ссылками на подробные разделы.
Планирование проекта
DHTMLX Gantt включает планировщик, понимающий структуру проекта и рабочее время:
- Типы задач и зависимости - три базовых типа (задача, суммарная задача, веха) со связями.
- Календари рабочего времени на уровне проекта, задач и ресурсов.
- Авто-планирование и критический путь для пересчёта планов и выделения задач, влияющих на дату окончания проекта.
Поведение авто-планирования может быть настроено под ваши процессы или такие инструменты, как MS Project.
Таймлайн и таблица
Компонент объединяет таблицу слева и масштабируемую временную шкалу справа, обе части гибко настраиваются:
- Гибкая настройка layout с дополнительными таблицами, правыми колонками и кастомными панелями.
- Настраиваемые колонки с inline-редактированием, множественным выбором, drag-and-drop и навигацией с клавиатуры.
- Настраиваемая временная шкала с маркерами и выделением временных интервалов.
Продвинутое управление проектом
Для подробного контроля хода проекта Gantt поддерживает:
- Базовые планы и дедлайны для сравнения плановых и фактических дат.
- Непланируемые задачи и разделённые задачи для неполной или прерываемой работы.
- Историю действий (undo/redo).
Управление ресурсами (PRO)
PRO-редакция добавляет слой управления ресурсами:
- Назначение ресурсов на задачи.
- Гистограммы ресурсов и диаграммы нагрузки.
- Группировку задач по ресурсам.
Это превращает диаграмму Ганта в удобный инструмент управления нагрузкой - без выхода из вашего приложения.
Экспорт и экосистема
DHTMLX Gantt интегрируется с внешними инструментами и поддерживает множество форматов экспорта/импорта:
- Экспорт в PDF/PNG и Excel (включая Node.js-модуль экспорта).
- Экспорт/импорт в MS Project и Primavera (через сервис экспорта).
Интеграция с фреймворками и backend
Интеграция на frontend
DHTMLX Gantt - независимый от фреймворков компонент на чистом JavaScript, работающий во всех современных браузерах. Его можно использовать:
Для React доступно два варианта:
- Использовать официальный ReactGantt-wrapper - декларативный компонент с пропсами и событиями. Оптимальный выбор для новых проектов.
- Использовать низкоуровневую интеграцию, если вы хотите полностью контролировать инициализацию, уничтожение и данные.
Для Angular, Vue и Svelte в разделах How to start показано, как создать лёгкий wrapper-компонент.
Интеграция с backend
На стороне сервера Gantt работает через REST-подобный API:
- Данные обычно загружаются/сохраняются в формате JSON (задачи, связи, ресурсы, назначения).
- Встроенный DataProcessor помогает маршрутизировать операции создания/обновления/удаления.
- Есть руководства для популярных платформ (Node.js, .NET Core, Laravel), охватывающие CRUD-операции и синхронизацию с БД.
Так Gantt легко подключается к существующим системам или микросервисам.
Что дальше?
Если вы только начинаете:
- Перейдите к руководству How to start для вашего фреймворка или JavaScript.
- Настройте колонки таблицы, рабочие календари, временную шкалу и поведение редактирования.
- Подключите backend - настройте DataProcessor и REST-эндпоинты для задач, связей и ресурсов.
- Изучите разделы Guides и API-справочник для глубокой кастомизации (шаблоны, события, расширения).
Если вы уже используете DHTMLX Gantt и обновляетесь с предыдущей версии, откройте Что нового - там собраны Release Notes и миграционные инструкции.