Примеры Форум Поддержка
Документация
Старт

FAQ

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

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

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

1) Используйте демо-приложение на базе Node.js:

  • извлеките пакет в какую-то папку
  • откройте терминал (или cmd, PowerShell)
  • выполните npm install
  • выполните npm run start
  • откройте http://localhost:9200 в вашем браузере
  • вы должны увидеть стартовую страницу, идентичную нашим онлайн-примерам https://docs.dhtmlx.com/gantt/samples/

2) Используйте веб-сервер Apache

  • Установите веб-сервер Apache. Если вы не уверены, как это сделать, мы предлагаем использовать XAMPP.
  • Поместите примеры Gantt в корневую директорию документов Apache (xampp/htdocs, если вы установили XAMPP).
  • Когда вы запустите веб-сервер Apache, вы сможете получить доступ к примерам по URL http://localhost/yourfolder.

3) Используйте встроенный в вашу 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

Диаграмма Ганта отображается некорректно

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

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

Диаграмма Ганта отображается некорректно в Internet Explorer

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

Например, HTML5 DOCTYPE:

<!DOCTYPE html>

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

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

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

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

gantt.config.show_errors = false;

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

Есть два наиболее очевидных сценария:

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

или

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

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

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

Вы можете заметить, что когда дата указана в днях без части час-минут и начальная и конечная даты совпадают, продолжительность задачи будет рассчитана как 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 декабря 2021 00:00:00
 
console.log(gantt.getTask(1).duration);
// 4

По умолчанию, последний день задачи исключен из продолжительности задачи, но есть возможность изменить поведение по умолчанию и включить последний день в продолжительность. Для получения более подробной информации, ознакомьтесь со статьей Task end date display & Inclusive end dates.

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

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

cyclic_error

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

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

equal_ids

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

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

parent_child_error

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

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

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

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

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

К началу