Available only in PRO Edition

Mehrere Diagramme auf einer Seite

Die dhtmlxGantt-Bibliothek arbeitet standardmäßig als statisches Objekt, was bedeutet, dass ihre Instanz immer auf der Seite aktiv ist. Sie können jederzeit über das globale gantt-Objekt darauf zugreifen. Es ist jedoch auch möglich, bei Bedarf neue Gantt-Instanzen zu erstellen.

Gantt-Instanz Konfiguration

Um eine neue Gantt-Instanz einzurichten, verwenden Sie die Gantt.getGanttInstance()-Methode:

// Hinweis: "Gantt" im Methodennamen beginnt mit einem Großbuchstaben
const ganttChart = Gantt.getGanttInstance();

Diese Methode ermöglicht das Übergeben eines Konfigurationsobjekts als optionalen Parameter:

const gantt = Gantt.getGanttInstance({
    plugins: {
        auto_scheduling: true,
    },
    container: "gantt_here",
    config: {
        work_time: true,
        duration_unit: "minute",
        auto_scheduling_compatibility: true,
        auto_scheduling: true,
        auto_scheduling_strict: true,
        auto_scheduling_initial: true,
        start_date: new Date(2020, 0, 1),
        end_date: new Date(2021, 0, 1),
    },
    calendars: [
        {
            id: "global",
            worktime: {
                hours: ["8:00-17:00"],
                days: [0, 1, 1, 1, 1, 0, 0],
                customWeeks: {
                    lastMonthOfYear: {
                        from: new Date(2020, 11, 1), // 1. Dezember 2020
                        to: new Date(2021, 0, 1),   // 1. Januar 00:00, 2021
                        hours: ["9:00-13:00"],
                        days: [0, 1, 1, 1, 1, 1, 0]
                    },
                    firstMonthOfNextYear: {
                        from: new Date(2021, 0, 1), // 1. Januar 2021
                        to: new Date(2021, 1, 1),   // 1. Februar 00:00, 2021
                        hours: ["14:00-16:00"],
                        days: [1, 1, 1, 1, 1, 0, 1]
                    }
                }
            }
        }
    ],
    data: {
        tasks: [
            { id: 11, text: "Projekt #1", type: "project", open: true, parent: 0 },
            { id: 1, start_date: "05-04-2020", text: "1", duration: 1, parent: "11", type: "task" },
            { id: 2, start_date: "05-04-2020", text: "2", duration: 3, parent: "11", type: "task" },
            { id: 3, start_date: "05-04-2020", text: "3", duration: 3, parent: "11", type: "task" },
            { id: 4, start_date: "05-04-2020", text: "4", duration: 3, parent: "11", type: "task" },
            { id: 5, start_date: "05-04-2020", text: "5", duration: 1, parent: "11", type: "task" }
        ],
        links: [
            { source: "1", target: "2", type: "0", id: 1 },
            { source: "1", target: "3", type: "0", id: 2 },
            { source: "1", target: "4", type: "0", id: 3 },
            { source: "2", target: "4", type: "0", id: 4 },
            { source: "3", target: "4", type: "0", id: 5 },
            { source: "4", target: "5", type: "0", id: 6 }
        ]
    }
});

Dieser Code initialisiert ein Gantt-Diagramm mit der definierten Konfiguration.

Das Konfigurationsobjekt kann die folgenden Eigenschaften enthalten:

• container - (string|HTMLElement) Gibt den HTML-Container (oder dessen ID) an, in dem das Gantt-Diagramm erscheinen soll. Wenn nicht gesetzt, wird Gantt ohne Container initialisiert.
• config - (object) Enthält die Konfigurationseinstellungen des Gantt-Diagramms.
• calendars - (array) Eine Liste von Arbeitszeitkalendern, die in das Gantt geladen werden sollen. Diese Kalender sollten dem Format entsprechen, das von der gantt.addCalendar-Methode unterstützt wird.
• templates - (object) Hält Vorlagen für das Gantt-Diagramm.
• events - (object) Definiert Ereignishandler in diesem Format:

const gantt = Gantt.getGanttInstance({
     events: {
          onTaskCreated: function(task) {
               task.owner = null;
               return true;
          },
          onTaskClick: function(id) {
               alert(gantt.getTask(id).text);
               return true;
          }
     }
})

• data - (object|string) Gibt die zu ladenden Daten oder die URL an, von der die Daten abgerufen werden sollen.
• plugins - (object) Listet die zu aktivierenden Erweiterungen auf.
• locale - (string|object) Ein zweibuchstabiger Sprachcode oder ein Locale-Objekt, das aktiviert werden soll.

Wenn Sie Gantt.getGanttInstance() ohne Parameter aufrufen, wird ein Gantt-Objekt mit den Standardeinstellungen erstellt. Sie müssen es anschließend konfigurieren, initialisieren und mit Daten füllen.

Hier ist ein Beispiel für die Anzeige von zwei Gantt-Diagrammen, eines unter dem anderen:

window.addEventListener("DOMContentLoaded", function() {
    var gantt1 = Gantt.getGanttInstance();
    gantt1.init("gantt_here");
    gantt1.parse(tasksA);
 
    var gantt2 = Gantt.getGanttInstance();
    gantt2.init("gantt_here_2");
    gantt2.parse(tasksB);
});
 
<body>
<div id="gantt_here" style="width:100%; height: 50%;"></div>
<div id="gantt_here_2" style="width:100%; height: 50%;"></div>
</body>

Integration mit dhtmlxLayout

Die Verwendung von dhtmlxLayout ist eine praktische Möglichkeit, mehrere Gantt-Diagramme auf einer Seite anzuordnen. Es bietet einen ordentlichen Rahmen und sorgt für eine reibungslose Interaktion mit anderen Seitenelementen, während es sich an Größenänderungen anpasst.

Um eine dhtmlxGantt-Instanz an eine Layoutzelle anzuschließen, verwenden Sie die attachGantt()-Methode.

Beachten Sie, dass das Anfügen eines Gantt-Diagramms an eine Layoutzelle es automatisch initialisiert. Konfigurieren Sie die Gantt-Instanz, bevor Sie sie im Layout platzieren.

function init() {
    var dhxLayout = new dhtmlXLayoutObject(document.body, "2U");
 
    gantt1 = Gantt.getGanttInstance();
    gantt1.config.min_column_width = 50;
    gantt1.config.scale_height = 90;
    dhxLayout.cells("a").attachGantt(null, null, gantt);     gantt1.parse(tasksA);
 
    gantt2 = Gantt.getGanttInstance();
    gantt2.config.date_grid = "%Y-%m-%d %H:%i";
    gantt2.config.xml_date = "%Y-%m-%d %H:%i:%s";
    dhxLayout.cells("b").attachGantt(null, null, gantt2);     gantt2.parse(tasksB);
}

Destruktor von Gantt- und DataProcessor-Instanzen

Ab Version 5.1 enthält das dhtmlxGantt-Objekt eine Destruktormethode, um unnötige Gantt-Instanzen zu entfernen.

So verwenden Sie den Destruktor:

var gantt = Gantt.getGanttInstance();
gantt.destructor();

Der Destruktor führt folgende Aktionen durch:

• Löscht die Daten in der Gantt-Instanz.
• Entfernt den angehängten dataProcessor (falls vorhanden).
• Trennt die Gantt-Instanz vom DOM.
• Hebt alle DOM-Ereignisse auf, die mit der gantt.event()-Methode angehängt wurden.

Der Destruktor löscht keine Datenspeicher, die mit gantt.createDatastore() erstellt wurden. Sie müssen diese manuell entfernen:

// Erstellen eines Datenspeichers
var resourcesStore = gantt.createDatastore({
    name: "resource",
    initItem: function(item) {
        item.id = item.key || gantt.uid();
        return item;
    }
});
 
// Zerstören des Datenspeichers später
resourcesStore.destructor();

Verwendung des Destruktors mit Angular

Hier ist ein Angular-Beispiel zum Entfernen einer Gantt-Instanz:

@Component({selector: 'app-gantt', template: `...`})
class MyGanttComponent implements OnDestroy {
  ngOnInit() {
     this.$gantt = Gantt.getGanttInstance();
 
     // Konfigurieren und initialisieren
  }
 
  ngOnDestroy() {
     this.$gantt.destructor();
     this.$gantt = null;
  }
}

Trennen des DataProcessors

Um eine dataProcessor-Instanz zu löschen und sie vom Gantt zu trennen, rufen Sie deren Destruktor auf:

var gantt = Gantt.getGanttInstance();
var dp = new gantt.dataProcessor("url");
dp.init(gantt);
 
// Zerstört den dataProcessor und trennt ihn
dp.destructor();

Zurück nach oben