Обзор DHTMLX Gantt
DHTMLX Gantt — наиболее настраиваемая JavaScript Gantt-диаграмма, полностью со спецификациями TypeScript. Она предназначена для создания продвинутых интерфейсов планирования и составления расписаний. Она интегрируется с React, Angular, Vue и другими фронтенд-фреймворками. DHTMLX Gantt также поддерживает разработку с поддержкой ИИ через DHTMLX MCP Server, Agent Skills и структурированный API.
Её можно использовать в управлении проектами, ERP, строительстве, производстве, выездном обслуживании, SaaS и других бизнес-приложениях, которые требуют настраиваемой визуальной временной шкалы.
Быстрый старт по фреймворкам
Вы можете использовать DHTMLX Gantt как обычный виджет JavaScript или интегрировать его в современный фреймворк. Начните с пошагового руководства, подходящего вашей технологии:
React, Angular и Vue поддерживают два подхода к интеграции:
- Официальные обёртки React Gantt, Angular Gantt и Vue Gantt (рекомендуются для PRO и проектов-оценок)
- Прямая интеграция базового JavaScript Gantt- компонента с React, Angular, Vue (Community edition)
Живые демо
Чтобы увидеть DHTMLX Gantt в работе, попробуйте некоторые из самых популярных демо:
- Базовая диаграмма Ганта с задачами и связями.
- Примеры авто-планирования и критического пути.
- Управление ресурсами: диаграмма и гистограмма.
- Просмотреть все примеры, чтобы оценить полный набор функций.
Посмотрите Все образцы, чтобы ознакомиться с полным набором возможностей Gantt.
Для ориентированных на фреймворк стартовых точек смотрите примеры репозиториев для React, Angular, и Vue. .
Некоторые образцы демонстрируют функционал PRO, поэтому перед повторным использованием в проекте Community edition ознакомьтесь с сравнением Community и PRO.
Ресурсы для разработчиков
- Руководство по установке для процессов установки Community, пробной и PRO версий
- Сравнение Community vs PRO по различиям функционала между редакциями
- Публичный npm-пакет JavaScript Gantt под Community edition
- GitHub-репозиторий исходного кода Community edition и отслеживания проблем
- Справка по API и образцы для деталей реализации
- What's New о выпусках и миграционных заметках
Осно вные возможности Gantt
DHTMLX Gantt включает движок планирования, гибкую временную шкалу и инструменты для работы с ресурсами.
Планирование проекта
В основе стоит движок планирования, который обрабатывает структуру проекта и рабочее время. Он включает:
- Типы задач и зависимости.
- Настройку рабочего времени с календарями задач и проектов, а также календарями, специфичными для ресурсов (версия PRO).
- Auto scheduling для перерасчета планов (версия PRO).
- Critical path для выделения задач, влияющих на дату завершения проекта (версия PRO).
Грид и временная шкала
Компонент сочетает в себе грид данных слева с масштабируемой по масштабу временной шкалой справа. Обе части настраиваются детально:
- Flexible layout с дополнительными гридами, колонками на правой стороне и настраиваемыми панелями.
- Configurable columns с встроенным редактированием, перетаскиванием и управлением клавиатурой, плюс multi-selection (PRO версия).
- Customizable time scale с маркерами и выделенными временными интервалами.
Продвинутые средства управления проектом (PRO)
Для команд, которым нужна не просто временная шкала, версия PRO DHTMLX Gantt предоставляет инструменты для детального отслеживания проекта:
- Baselines и deadlines для сопоставления планируемых дат с текущими.
- Unscheduled tasks и split tasks для незапланированной, прерванной или поэтапной работы.
Управление ресурсами и загрузкой (PRO)
Версия PRO добавляет отдельный уровень ресурсов, превращая диаграмму Ганта в интерфейс планирования, который охватывает и планирование задач, и видимость загрузки. Включает:
- Resource assignments, позволяющие связывать ресурсы с задачами для точного планирования.
- Resource histograms и resource load diagrams для визуализации загрузки команды.
- Grouping tasks by resource для отслеживания рабочих нагрузок, обнаружения конфликтов и балансировки команды.
Экспорт и экосистема
Команды часто мигрируют между платформами, сохраняют локальные копии или выполняют аналитику вне системы. DHTMLX Gantt интегрируется с внешними инструментами и форматами экспорта посредством:
- Экспорт в PDF/PNG и Excel, включая Node.js export module.
- Экспорт/импорт в MS Project и Primavera через поддерживаемый экспорт-сервис.
Взаимодействие и редактирование
Пользователи могут редактировать данные прямо на диаграмме, а не только просматривать их. Это поддерживается через:
- Настраиваемый редактор во всплывающем окне для просмотра и редактирования сведений о задачах, с поддержкой пользовательских полей и кнопок.
- Quick info всплывающие подсказки и tooltips, которые выводят детали задач без открытия полной формы.
- Drag-and-drop создание и выбор задач, плюс мышиная прокрутка временной шкалы.
- Keyboard navigation и поддержка доступности.
- Undo/redo history для безопасного редактирования.
Настройка и стилизация
Внешний вид диаграммы можно настраивать на любом уровне — от полной темы до одной полосы задачи, че рез:
- Набор встроенных скинов, основанных на CSS-переменных, с поддержкой глубокой настройки и созданием новых тем.
- Шаблоны для переопределения того, как отображаются задачи, связи и клетки грид.
- Гранулированная окраска задач и стилизация связей для визуального выделения конкретных элементов.
- Локализация интерфейса и форматов даты/времени.
Издания и лицензирование
DHTMLX Gantt доступен в двух редакциях: Community и PRO. Вы можете начать с бесплатной Community edition и позже перейти к PRO edition, если потребуются дополнительные функции, официальная поддержка и полностью поддерживаемая база Gantt. Также можно сразу начать с PRO edition либо через официальный пробный период, либо с платной лицензией. Выберите один из следующих вариантов для начала работы с DHTMLX Gantt:
- Community edition. Бесплатна и лицензируется по MIT, охватывает основные интерактивные функции Gantt для DHTMLX Gantt v10+.
- Official trial. Позволяет оценить полный набор функций PRO и получить техническую поддержку в течение пробного периода.
- PRO edition. Создана для проблемной среды, включает расширенные функции планирования, официальную поддержку и коммерческую лицензию.
Чтобы увидеть точные различия между редакциями, смотрите Сравнение Community и PRO. Для пошаговой настройки каждого варианта смотрите руководство по установке.
Если вы переходите с более ранней версии GPL, воспользуйтесь руководством миграции. DHTMLX Gantt v10 и далее больше не выпускаются под GPL; GPL v2 применяется только к более ранним версиям.
Инструменты кодирования с ИИ
Для разработки с поддержкой ИИ начните с руководств по DHTMLX Gantt, созданных специально для помощников по кодированию:
- Руководство по инструментам ИИ
- Руководство DHTMLX MCP Server
- Руководство Agent Skills
- Руководство Lovable AI интеграции
Интеграция с бэкендом
DHTMLX Gantt позволяет подключаться к любому бэкенду, реализуя RESTful API на сервере:
- Данные обычно загружаются и сохраняются в формате JSON для задач, связей, ресурсов и назначений.
- Встроенный DataProcessor помогает маршрутизировать операции создания, обновления и удаления на ваш сервер.
- Есть руководства для популярных бэкенд-платформ и фреймворков (Node.js, .NET Core, Laravel и т. д.), которые охватывают CRUD-операции и лучшие практики синхронизации Gantt с вашей базой данных.
Что дальше
Если вы только начинаете, действуйте следующим образом:
- Обратитесь к Руководству по началу для вашей предпочитаемой фронтенд-технологии или обычного JavaScript.
- Настройте колонки грид, календари рабочего времени, шкалы времени и поведение редактирования.
- Подключитесь к вашему бэкенду, настройте DataProcessor и конечные точки приложения для задач, связей и ресурсов.
- Изучайте руководства и API-справочник для более глубокой настройки, такой как шаблоны, события и расширения.
Если вы уже используете DHTMLX Gantt и обновляетесь с более ранней версии, проверьте Что нового для заметок о релизах и резюме последних функций и миграционных руководств.