Перейти к основному содержимому

Часто задаваемые вопросы

Как открыть примеры

Дистрибутив компонента включает демонстрационное серверное приложение, которое можно использовать для локального запуска примеров. Приложение требует Node.js и использует хранение в памяти для демонстраций, которое предполагает хранение данных на сервере (то есть настройка базы данных не требуется).

Что нужно сделать, чтобы запустить примеры

  1. Использовать демо backend-приложение на Node.js:
  • распакуйте пакет в какую‑то папку
  • откройте терминал (или cmd, PowerShell)
  • выполните npm install
  • выполните npm run start
  • откройте http://localhost:9200 в вашем браузере
  • вы должны увидеть индексную страницу, идентичную нашим онлайн‑образцам https://docs.dhtmlx.com/gantt/samples/
  1. Использовать веб-сервер Apache
  • Установите веб-сервер Apache. Если вы не уверены, как это сделать, предлагаем использовать XAMPP.
  • Поместите образцы Gantt в корневую директорию документов Apache (xampp/htdocs, если вы установили XAMPP).
  • При запуске веб‑сервера Apache к примерам можно получить доступ по адресу http://localhost/yourfolder.
  1. Использовать встроенный в вашей IDE веб‑сервер разработки

Некоторые IDE предоставляют встроенный веб‑сервер разработки, например: https://www.jetbrains.com/help/webstorm/creating-local-server-configuration.html.

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

Зачем это может понадобиться

Некоторые примеры в нашем пакете загружают данные из файлов JSON с использованием AJAX (xhr). Чтобы это работало, пример должен быть открыт через веб‑сервер.

Если открыть пример двойным щелчком, браузер откроет его как файл. В таком режиме браузер будет блокировать AJAX-вызовы, и компонент не сможет загрузить файлы данных. Вы увидите всплывающее окно Invalid data в правом верхнем углу экрана.

Чтобы убедиться, что описанное поведение действительно относится к вашему случаю, вы можете проверить URL в панели навигации браузера. Если в URL используется формат file:///, например:

file:///D:/www/gantt-eval/samples/11_resources/09_resource_histogram.html

то можно быть уверенным в этом. Образцы, загружающие данные из файлов, работать в этом режиме не будут.

Когда вы открываете пример через веб‑сервер, URL будет выглядеть примерно так (http:// может быть опущен):

http://localhost/gantt-eval/samples/11_resources/09_resource_histogram.html

Gantt не отображается корректно

Если диаграмма Gantt не отрисовывается на странице корректно, пожалуйста, проверьте стиль CSS для контейнера диаграммы — он должен иметь допустимый размер в пикселях или процентах.

  • Если размер задан в процентах — убедитесь, что у родительского контейнера также задана высота.
  • Если диаграмма Gantt размещена непосредственно в body — укажите следующий стиль CSS, чтобы корректно использовать высоту в процентах:
html, body{
margin:0px;
padding:0px;
height:100%; /*mandatory*/
overflow:hidden;
}

Gantt не отображается корректно в Internet Explorer

Если диаграмма Gantt не отрисовывается на странице корректно только в браузере Internet Explorer, убедитесь, что ваша страница использует полное объявление DOCTYPE. dhtmlxGantt может работать корректно в стандартных режимах IE6, IE7 и IE8, но не предназначен для использования в режимах quirks IE.

Например, DOCTYPE HTML5 выглядит так:

<!DOCTYPE html>

В правом верхнем углу появляется сообщение об ошибке

error_alert

Во‑первых, нужно выяснить, что вызывает ошибку.

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

Однако вы можете захотеть отключить эти сообщения перед выпуском вашего приложения для конечных пользователей. В этом случае можно использовать конфигурацию show_errors:

gantt.config.show_errors = false;

Gantt не отображает ничего

Существует две наиболее очевидные сценарии:

  1. Вы пытаетесь реализовать backend API вручную или следуя нашим Решениям, но Gantt не отображает ни задач, ни связей при открытии страницы.

или

  1. У вас возникают проблемы с сохранением изменений на бэкенде.

Прочитайте статью Устранение проблем интеграции бэкенда, которая даёт инструкции по идентификации причин проблем.

Как включить последний день задачи в продолжительность

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

Рассмотрим еще один пример, когда даты начала и окончания равны "01-12-2021" и "05-12-2021" соответственно. Это заставит вас подумать, что задача должна длиться 5 дней (с 1 по 5 декабря). Но Gantt вычисляет её продолжительность как 4 дня.

gantt.parse({ tasks: [
{
id: 1,
text: "Task 1",
start_date: "01-12-2021",
end_date: "05-12-2021"
}
]}, links:[]);

console.log(gantt.getTask(1).end_date);
// 5 December 2021 00:00:00

console.log(gantt.getTask(1).duration);
// 4

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

Ошибка циклической ссылки

Если вы передаете в Gantt некорректные данные, его древовидная структура становится циклической, что вызывает ошибку циклической ссылки.

cyclic_error

Например, эта ошибка может возникнуть в следующих случаях:

  • Если ID родителя задачи совпадает с ID самой задачи:

equal_ids

Задача №2 не может быть родителем самой себя.

  • Если один из детей задачи становится её родителем:

parent_child_error

"Task #4" указан как родитель для "Task #1". Но в то же время "Task #4" также является дочерним элементом "Task #1".

Истек пробный период

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

Поэтому обязательно полностью удалите файлы пробной версии диаграммы Gantt перед установкой PRO‑версии. Для получения дополнительной информации смотрите раздел Добавление PRO Edition into Project.

Совет: чтобы проверить, какой файл подключён, можно набрать gantt.license в веб‑консоли.

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.