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

dhtmlxGantt на чистом JS/HTML

Когда вы работаете с dhtmlxGantt в приложении, первым делом необходимо его настроить, проще говоря, отобразить диаграмму Ганта на странице.

Это руководство объясняет, как настроить dhtmlxScheduler, используя только чистый JS и HTML. Если вы используете фронтенд-фреймворк, для этого есть отдельные руководства:

Angular React Svelte Vue.js

Создание базовой диаграммы Ганта

Чтобы создать базовую диаграмму Ганта на вашей странице, достаточно выполнить три шага:

  1. Добавьте файлы кода dhtmlxGantt на вашу страницу.
  2. Настройте контейнер DIV в вашем HTML.
  3. Используйте метод gantt.init(), чтобы инициализировать dhtmlxGantt в этом контейнере. Этот метод принимает HTML-контейнер или его ID в качестве параметра, где будет отображаться диаграмма Ганта.
<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body>
    <div id="gantt_here" style='width:1000px; height:400px;'></div>
    <script type="text/javascript">
        gantt.init("gantt_here");
    </script>
</body>
</html>

desktop/init_gantt_front.png

Related sample:  Basic initialization

Добавление исходных файлов Gantt в ваш проект

Существует несколько способов включения файлов Gantt в ваш проект, в зависимости от типа приложения, которое вы создаете:

Включение файлов через тег <script>

Чтобы использовать dhtmlxGantt, вам необходимо подключить два файла:

  • dhtmlxgantt.js
  • dhtmlxgantt.css
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">

Пакет dhtmlxGantt имеет определенную структуру, поэтому важно знать, где находятся эти файлы:

  • sources: Содержит исходный код библиотеки, который не минифицирован и легче читается. Это в основном для отладки.
  • samples: Включает примеры кода.
  • docs: Содержит полную документацию.
  • codebase: Содержит оптимизированные файлы для продакшена. Используйте файлы из этой папки в своих приложениях.

Импортирование файлов в приложения ES6/7 и TypeScript

Чтобы импортировать файлы Gantt, используйте эту команду:

import { gantt } from 'dhtmlx-gantt';

Если у вас есть версия Commercial, Enterprise или Ultimate, команда выглядит так:

import { gantt, Gantt } from 'dhtmlx-gantt';

Использование Gantt с Vite

Для проектов, использующих Vite, вам нужно изменить файл vite.config.js, чтобы убедиться, что Gantt правильно включен:

vite.config.js

optimizeDeps: {
    include: [
        'dhtmlx-gantt',
    ]
}

Svelte Production Build

Если вы используете Gantt в приложении Svelte, добавьте эту настройку в vite.config.js для продакшн-сборок. Обновите путь gantt_8.0.6_evaluation в соответствии с вашей папкой Gantt:

vite.config.js

build: {
    commonjsOptions: {
        include: [
            "node_modules",
            "gantt_8.0.6_evaluation/codebase/dhtmlxgantt.js"
        ]
    },
}

Включение файлов в приложение на базе RequireJS

Чтобы включить dhtmlxGantt в приложение на базе RequireJS, следуйте этому примеру:

requirejs(["codebase/dhtmlxgantt"], function(dhx){
  var gantt = dhx.gantt;
  var Gantt = dhx.Gantt; // для сборок Enterprise
 
  gantt.init("gantt_here");
  gantt.parse({
    data: [
      { id:1, text:"Project #2", start_date:"01-04-2018", 
        duration:18, progress:0.4, open:true },
      { id:2, text:"Task #1", start_date:"02-04-2018", 
        duration:8, progress:0.6, parent:1 },
      { id:3, text:"Task #2", start_date:"11-04-2018", 
        duration:8, progress:0.6, parent:1 }
    ],
    links: [
      { id:1, source:1, target:2, type:"1" },
      { id:2, source:2, target:3, type:"0" }
    ]
  });
});

Библиотека dhtmlxGantt предоставляет объект с полями gantt и Gantt (для версий Commercial, Enterprise или Ultimate), как описано здесь.

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

Вот пример настройки пользовательского файла расширения custom_tooltip_plugin.js:

requirejs.config({
  paths: {
    "dhtmlxgantt": "../../codebase/dhtmlxgantt",
    "ext/dhtmlxgantt_custom_tooltip": "../custom_tooltip_plugin"
  },
  shim: {
    "ext/dhtmlxgantt_custom_tooltip": ["dhtmlxgantt"]
  }
});
 
requirejs(["dhtmlxgantt"], 
function (dhx) {
  var gantt = dhx.gantt;
 
  var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
  var today = new Date(2018, 3, 5);
  gantt.addMarker({
    start_date: today,
    css: "today",
    text: "Today",
    title: "Today: " + date_to_str(today)
  });
 
  gantt.init("gantt_here");
  gantt.parse({
    data: [
      { id:1, text:"Project #2", start_date:"01-04-2018",
        duration:18, progress:0.4, open:true },
      { id:2, text:"Task #1", start_date:"02-04-2018", 
        duration:8, progress:0.6, parent:1 },
      { id:3, text:"Task #2", start_date:"11-04-2018", 
        duration:8, progress:0.6, parent:1 }
    ],
    links: [
      { id:1, source:1, target:2, type:"1" },
      { id:2, source:2, target:3, type:"0" }
    ]
  });
});

Убедитесь, что имя модуля для любого файла в пакете указано как относительный путь в папке 'codebase' плюс имя файла. Например:

Основная библиотека:

  • "dhtmlxgantt": "./vendor/dhtmlxgantt/dhtmlxgantt"

Полноэкранный режим

Чтобы диаграмма Ганта корректно отображалась в полноэкранном режиме в разных браузерах, добавьте этот стиль на вашу страницу:

<style type="text/css" media="screen">
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }

</style>
К началу