dhtmlxGantt in einfachem JS/HTML
Wenn Sie eine Anwendung mit dhtmlxGantt entwickeln, besteht der erste Schritt darin, das Gantt-Diagramm auf der Seite zu initialisieren bzw. einfach gesagt anzuzeigen.
Diese Anleitung beschreibt die Initialisierung von dhtmlxGantt in reinem JS/HTML. Sie können auch die Anleitungen zur Integration mit Frontend-Frameworks prüfen:
 |  |  |  |
| Angular | React | Svelte | Vue.js |
Erstellung eines grundlegenden Gantt-Diagramms
Um ein grundlegendes Gantt-Diagramm auf der Seite anzuzeigen, folgen Sie 3 Schritten:
- Binden Sie die dhtmlxGantt-Code-Dateien auf der Seite ein.
- Erstellen Sie einen DIV-Container auf der Seite.
- Initialisieren Sie dhtmlxGantt im neu erstellten Container mit der init Methode. Als Parameter akzeptiert die Methode einen HTML-Container (oder dessen ID), in dem das Gantt-Diagramm angezeigt wird.
<!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>
Verwandtes Beispiel: Grundlegende Initialisierung
Wie man Gantt-Quelldateien zu einem Projekt hinzufügt
Sie können Gantt-Code-Dateien je nach Art der von Ihnen erstellten Anwendung auf verschiedene Weisen in Ihr Projekt einbinden:
- Dateien über das <script>>-Tag einbinden
- Dateien in ES6/7- und TypeScript-Anwendungen importieren
- Gantt mit Vite verwenden
- Svelte-Produktionsbuild
- Dateien in eine RequireJS-basierte Anwendung einbinden
Dateien über das <script>>-Tag einbinden
Für dhtmlxGantt müssen auf der Seite zwei Code-Dateien eingebunden werden:
- dhtmlxgantt.js
- dhtmlxgantt.css
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
Lassen Sie sich schnell die Struktur des dhtmlxGantt-Pakets anzeigen, um herauszufinden, wo sich die Dateien befinden.
Hauptordner und Dateien, die das dhtmlxGantt-Paket bilden, sind:
- sources - die Quellcodedateien der Bibliothek. Die Dateien sind nicht minimiert und gut lesbar. Das Paket ist überwiegend dafür gedacht, Bausteine zu debuggen.
- samples - die Code-Beispiele
- codebase - die gepackten Code-Dateien der Bibliothek. Diese Dateien haben eine deutlich geringere Größe und sind für den Einsatz in der Produktion gedacht. In Ihren Apps müssen Sie Dateien aus diesem Ordner verwenden
Dateien in ES6/7- und TypeScript-Anwendungen importieren
Verwenden Sie folgenden Befehl, um Dateien zu importieren:
import { gantt } from 'dhtmlx-gantt';
Für die Commercial-, Enterprise- oder Ultimate-Version sieht der Befehl so aus:
import { gantt, Gantt } from 'dhtmlx-gantt';
Gantt mit Vite verwenden
Wenn Sie Vite in Ihrem Projekt verwenden, ist folgende Einstellung für die vite.config.js-Datei erforderlich, um sicherzustellen, dass Gantt korrekt in die App eingebunden wird:
optimizeDeps: {
include: [
'dhtmlx-gantt',
]
}
Svelte-Produktionsbuild
Wenn Sie Gantt in einer Svelte-App verwenden, müssen Sie die folgende Einstellung in die vite.config.js-Datei für den Produktionsbuild aufnehmen, wobei der Ordner gantt_9.0.14_evaluation durch den Pfad zu Ihrem Gantt-Ordner ersetzt wird:
build: {
commonjsOptions: {
include: [
"node_modules",
"gantt_9.0.14_evaluation/codebase/dhtmlxgantt.js"
]
},
}
Dateien in eine RequireJS-basierte Anwendung einbinden
Um dhtmlxGantt-Dateien in eine RequireJS-basierte Anwendung einzubinden, müssen Sie der untenstehenden Logik folgen, wie im Beispiel gezeigt:
requirejs(["codebase/dhtmlxgantt"], (dhx) => {
const gantt = dhx.gantt;
const Gantt = dhx.Gantt; // für Enterprise-Builds
gantt.init("gantt_here");
gantt.parse({
tasks: [
{ id: 1, text: "Project #2", start_date: "01-04-2025", duration: 18, progress: 0.4, open: true },
{ id: 2, text: "Task #1", start_date: "02-04-2025", duration: 8, progress: 0.6, parent: 1 },
{ id: 3, text: "Task #2", start_date: "11-04-2025", duration: 8, progress: 0.6, parent: 1 }
],
links: [
{ id: 1, source: 1, target: 2, type: "1" },
{ id: 2, source: 2, target: 3, type: "0" }
]
});
});
Die dhtmlxGantt-Bibliothek gibt ein Objekt mit den Feldern gantt und Gantt zurück (in kommerziellen, Enterprise- oder Ultimate-Versionen) - Die Objekte gantt und Gantt, wie unten beschrieben, finden Sie hier.
Wenn Sie Gantt mit benutzerdefinierten Erweiterungen in RequireJS verwenden, sollten Sie die shim-Konfiguration für RequireJS angeben und die Abhängigkeiten der Erweiterungen direkt von Gantt aus festlegen.
Das folgende Beispiel demonstriert, wie eine benutzerdefinierte Erweiterungsdatei custom_tooltip_plugin.js korrekt gesetzt werden kann:
requirejs.config({
paths: {
"dhtmlxgantt": "../../codebase/dhtmlxgantt",
"ext/dhtmlxgantt_custom_tooltip": "../custom_tooltip_plugin"
},
shim: {
"ext/dhtmlxgantt_custom_tooltip": ["dhtmlxgantt"]
}
});
requirejs(["dhtmlxgantt"], (dhx) => {
const gantt = dhx.gantt;
const date_to_str = gantt.date.date_to_str(gantt.config.task_date);
const today = new Date();
gantt.addMarker({
start_date: today,
css: "today",
text: "Today",
title: `Today: ${date_to_str(today)}`
});
gantt.init("gantt_here");
gantt.parse({
tasks: [
{ id: 1, text: "Project #2", start_date: "01-04-2025", duration: 18, progress: 0.4, open: true },
{ id: 2, text: "Task #1", start_date: "02-04-2025", duration: 8, progress: 0.6, parent: 1 },
{ id: 3, text: "Task #2", start_date: "11-04-2025", duration: 8, progress: 0.6, parent: 1 }
],
links: [
{ id: 1, source: 1, target: 2, type: "1" },
{ id: 2, source: 2, target: 3, type: "0" }
]
});
});
Überprüfen Sie, dass der Modulname für jede Datei im Paket als relativer Pfad innerhalb des 'codebase'-Ordners des Pakets plus dem Dateinamen angegeben ist, z. B.:
Kernbibliothek:
- "dhtmlxgantt": "./vendor/dhtmlxgantt/dhtmlxgantt"
Vollbildmodus
Um ein Gantt-Diagramm im Vollbildmodus in verschiedenen Browsern korrekt anzuzeigen, definieren Sie den folgenden Stil auf der Seite:
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>