Zum Hauptinhalt springen

dhtmlxGantt in Plain JS/HTML

Beim Erstellen einer Anwendung mit dhtmlxGantt besteht der erste Schritt darin, das Gantt-Diagramm einzurichten bzw. einfach gesagt, auf Ihrer Seite darzustellen.

Diese Anleitung beschreibt, wie Sie dhtmlxGantt mit einfachem JavaScript und HTML initialisieren. Informationen zur Integration mit Frontend-Frameworks finden Sie auch in diesen Anleitungen:

angular_iconreact_iconsvelte_iconvue_icon
AngularReactSvelteVue.js

Erstellen eines einfachen Gantt-Diagramms​

Um ein einfaches Gantt-Diagramm auf einer Seite anzuzeigen, sind drei Schritte notwendig:

  1. Fügen Sie die dhtmlxGantt-Code-Dateien zu Ihrer Seite hinzu.
  2. Erstellen Sie einen DIV-Container, in dem das Diagramm angezeigt werden soll.
  3. Initialisieren Sie dhtmlxGantt in diesem Container mit der init Methode. Diese Methode akzeptiert ein HTML-Containerelement oder dessen ID als Parameter, in dem das Gantt-Diagramm gerendert 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>

/init_gantt_front.png

Basic initialization

Wie man Gantt-Quelldateien zu einem Projekt hinzufügt​

Je nach Art der Anwendung, die Sie erstellen, gibt es verschiedene Möglichkeiten, die Gantt-Quelldateien zu Ihrem Projekt hinzuzufügen:

Dateien über das <script>-Tag einbinden​

Um dhtmlxGantt zu verwenden, müssen Sie zwei Dateien zu Ihrer Seite hinzufügen:

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

Werfen wir einen kurzen Blick auf die Struktur des dhtmlxGantt-Pakets, um zu sehen, wo sich diese Dateien befinden.

Die Hauptordner und -dateien im dhtmlxGantt-Paket sind:

  • sources - Quellcodedateien der Bibliothek, unminifiziert und gut lesbar. Diese dienen hauptsächlich zum Debuggen von Komponenten.
  • samples - Beispiel-Codebeispiele.
  • codebase - Minifizierte Code-Dateien für den produktiven Einsatz. Sie sollten die Dateien aus diesem Ordner in Ihren Anwendungen verwenden.

Dateien in ES6/7- und TypeScript-Anwendungen importieren​

Verwenden Sie diesen Befehl, um die Dateien zu importieren:

import { gantt } from 'dhtmlx-gantt';

Für die Commercial-, Enterprise- oder Ultimate-Versionen verwenden Sie:

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

Verwendung von Gantt mit Vite​

Wenn Ihr Projekt Vite verwendet, fügen Sie diese Einstellung zu Ihrer vite.config.js Datei hinzu, damit Gantt korrekt eingebunden wird:

vite.config.js

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

Svelte Production Build​

Wenn Sie Gantt in einer Svelte-App verwenden, fügen Sie Folgendes für den Produktions-Build zur vite.config.js Datei hinzu. Ersetzen Sie gantt_8.0.6_evaluation durch den Pfad zu Ihrem Gantt-Ordner:

vite.config.js

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

Dateien in eine RequireJS-basierte Anwendung einbinden​

Um dhtmlxGantt-Dateien in einer RequireJS-basierten Anwendung hinzuzufügen, verwenden Sie folgendes Muster:

requirejs(["codebase/dhtmlxgantt"], function(dhx){
  var gantt = dhx.gantt;
  var Gantt = dhx.Gantt; // für Enterprise-Builds
 
  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" }
    ]
  });
});

Die dhtmlxGantt-Bibliothek gibt ein Objekt mit den Feldern gantt und Gantt zurück (letzteres für Commercial-, Enterprise- oder Ultimate-Versionen) - diese entsprechen den gantt- und Gantt-Objekten, wie hier beschrieben.

Hinweis

Wenn Sie Gantt mit benutzerdefinierten Erweiterungen in RequireJS verwenden, stellen Sie sicher, dass Sie die shim-Konfiguration für RequireJS angeben und die Abhängigkeiten der Erweiterungen direkt auf Gantt setzen.

Hier ein Beispiel, wie eine benutzerdefinierte Erweiterungsdatei custom_tooltip_plugin.js korrekt konfiguriert wird:

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" }
    ]
  });
});

Stellen Sie sicher, dass der Modulname für jede Datei innerhalb des Pakets als relativer Pfad innerhalb des 'codebase'-Ordners plus Dateiname angegeben wird, zum Beispiel:

Kernbibliothek:

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

Vollbildmodus​

Damit das Gantt-Diagramm im Vollbildmodus in verschiedenen Browsern korrekt angezeigt wird, fügen Sie diesen Stil zu Ihrer Seite hinzu:

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