Gantt Layout

Ab Version 5.0 ermöglicht Gantt die Konfiguration seines Layouts, sodass die Elemente der Komponente als innere Ansichten innerhalb dieses Layouts organisiert werden können. Dies ermöglicht das Hinzufügen zusätzlicher Zeitachsen und Raster, wodurch eine flexiblere Struktur für Ihr Gantt-Diagramm entsteht und verschiedene Anordnungsstile ermöglicht werden.

Zum Beispiel können Sie ein weiteres Raster rechts neben der Zeitachse hinzufügen:

Oder Sie könnten ein zusätzliches Raster und eine Zeitachse unter den Standardansichten einfügen:

Standardlayout

Sie können das Layout mithilfe der Konfigurationsoption gantt.config.layout definieren. Hier ist die Standardlayout-Konfiguration:

gantt.config.layout = {
    css: "gantt_container",
    rows:[
        {
           cols: [
            {
              // die Standard-Rasteransicht 
              view: "grid",  
              scrollX:"scrollHor", 
              scrollY:"scrollVer"
            },
            { resizer: true, width: 1 },
            {
              // die Standard-Zeitachsenansicht
              view: "timeline", 
              scrollX:"scrollHor", 
              scrollY:"scrollVer"
            },
            {
              view: "scrollbar", 
              id:"scrollVer"
            }
        ]},
        {
            view: "scrollbar", 
            id:"scrollHor"
        }
    ]
}

Das Layout von Gantt besteht aus Zellen, die von Ansichten gefüllt werden. Die Haupt- und Hilfselemente von Gantt werden als Ansichten dargestellt, wie zum Beispiel:

grid: Repräsentiert den Rasterbereich des Gantt-Diagramms. Das Hauptgitter für Aufgaben hat die id:"grid".
timeline: Repräsentiert den Zeitachsenbereich des Gantt-Diagramms. Die Hauptzeitachse für Aufgaben hat die id:"timeline".
resizer: Fügt eine Resizer-Linie hinzu. Um es zu aktivieren, setzen Sie resizer auf true. (PRO Edition nur)
scrollbar: Fügt dem Gantt-Diagramm Bildlaufleisten hinzu. Raster- und Zeitachsenansichten können mit bestimmten Bildlaufleisten verknüpft werden. Weitere Details finden Sie unten.
resourceGrid: Ein vorkonfiguriertes Raster für ein Ressourcenpanel. (PRO Edition nur) Weitere Details hier.
resourceTimeline: Eine vorkonfigurierte Zeitachse für ein Ressourcenpanel. (PRO Edition nur) Weitere Details hier.

Jede Ansicht wird mit einem Objekt mit spezifischen Eigenschaften konfiguriert. Sie können die Konfiguration für grid- und timeline-Ansichten anpassen. Standardmäßig werden Optionen aus dem globalen Objekt gantt.config abgeleitet.

Stellen Sie sicher, dass Sie die Layoutkonfiguration definieren, bevor Sie Gantt initialisieren. Wenn Sie das Layout ändern, aktualisieren Sie es mit resetLayout.

Scrollbar

Die Bildlaufleisten im Layout werden durch die Ansicht "scrollbar" definiert. Sowohl horizontale als auch vertikale Bildlaufleisten können hinzugefügt werden.

Um eine Bildlaufleiste mit einer Ansicht zu verknüpfen, verwenden Sie die Eigenschaften scrollX oder scrollY mit der ID der Bildlaufleiste.

Eine Bildlaufleiste für eine Ansicht

Sie können mehrere Ansichten mit derselben Bildlaufleiste verbinden. Um eine Bildlaufleiste mit einer Ansicht zu binden:

Fügen Sie eine Bildlaufleiste mit der gewünschten Scrollrichtung hinzu und weisen Sie ihr eine ID zu.
Verwenden Sie die ID der Bildlaufleiste in der scrollX/scrollY-Eigenschaft innerhalb der Ansichtskonfiguration.

Das Hinzufügen einer Bildlaufleiste im cols-Array erstellt eine vertikale Bildlaufleiste, während das Hinzufügen im rows-Array eine horizontale Bildlaufleiste erstellt. Alternativ können Sie die Scrollrichtung explizit mit der Eigenschaft scroll angeben:

{ view: "scrollbar", id:"scroller", scroll: "x" } // horizontal

oder:

{ view: "scrollbar", id:"scroller", scroll: "y" } // vertikal

Hier ist ein Beispiel für die Bindung benutzerdefinierter Raster- und Zeitachsenansichten an eine vertikale Bildlaufleiste:

gantt.config.layout = {
    css: "gantt_container",
    rows:[
        {
           cols: [
            {             
              view: "grid", 
              scrollY:"scrollVer"
            },
            { resizer: true, width: 1 },
            {
              view: "timeline", 
              scrollY:"scrollVer"
            },
            {
              view: "scrollbar", 
              id:"scrollVer"
            }
        ]}
    ]
}

In diesem Setup bewegt das Scrollen der vertikalen Bildlaufleiste sowohl das Raster als auch die Zeitachse zusammen. Standardmäßig sind das Raster und die Zeitachse mit sowohl horizontalen als auch vertikalen Bildlaufleisten verbunden.

Sie können auch eine separate horizontale Bildlaufleiste für die Rasteransicht hinzufügen. Erfahren Sie mehr darüber.

Bildlaufleisten für eine Ansicht

Der vorherige Abschnitt erklärte, wie man einer Ansicht eine bestimmte Bildlaufleiste hinzufügt, indem man eine einfache Layoutkonfiguration wie diese verwendet:

{cols: [ {rows: [{}, {}]}, {rows: [{}, {}]}]}

oder

{rows: [ {cols: [{}, {}]}, {cols: [{}, {}]}]}

Wenn Sie eine Ansicht mit sowohl vertikalen als auch horizontalen Bildlaufleisten verbinden möchten, können Sie eine komplexere Layoutkonfiguration erstellen, indem Sie cols- und rows-Arrays mehrmals verschachteln, wie folgt:

{cols: [ 
    {
        rows: [
            {
                cols: [{}, {}]
            }, 
            {
                cols: [{}, {}]
            }
        ]
    }, 
    {
        rows: [
            {
                cols: [{}, {}]
            }, 
            {
                cols: [
                    {
                        rows: [{}, {}]
                    }, 
                    {   
                        rows: [{}, {}]
                    }
                ]
            }
        ]
    }
]}

Schauen Sie sich diese Beispiele an:

Layout-Anpassung

Die Standardlayout-Konfiguration kann angepasst werden, um eine benutzerdefinierte Anordnung der Gantt-Diagrammelemente auf einer Seite mithilfe zusätzlicher Layout-Ansichten zu erstellen.

Zum Beispiel können Sie zusätzliche Raster- und Zeitachsenansichten hinzufügen, um ein Ressourcenpanel am unteren Rand des Haupt-Gantt-Diagramms zu erstellen. So können Sie ein solches Layout einrichten:

Erstellen Sie ein Layout mit mehreren Zeilen.
Fügen Sie der ersten Zeile ein Standardraster und eine Zeitachse hinzu.
Fügen Sie der nächsten Zeile zusätzliche Raster- und Zeitachsenansichten hinzu und verknüpfen Sie sie mit einer benutzerdefinierten Datenquelle.
Platzieren Sie einen Resizer zwischen diesen Zeilen.
Fügen Sie der letzten Zeile eine Bildlaufleiste hinzu, die sowohl mit den Standard- als auch den Ressourcenzeitleisten verknüpft ist.

gantt.config.layout = {
    css: "gantt_container",
    rows:[
        {
          // das Standardlayout
          cols: [
            {view: "grid",
                config: mainGridConfig, scrollY:"scrollVer"},
            {resizer: true, width: 1},
            {view: "timeline", 
                scrollX:"scrollHor", scrollY:"scrollVer"},
            {view: "scrollbar", id:"scrollVer"}
          ]
        },
        {resizer: true, width: 1},
        {
          // ein benutzerdefiniertes Layout
          cols: [
            {view: "grid", id: "resourceGrid", bind:"resource", 
                config:resourceGridConfig, scrollY:"resourceVScroll"},
            {resizer: true, width: 1},
            {view:"timeline", id:"resourceTimeline", scrollX:"scrollHor", 
                bind:"resource", bindLinks: null, layers: resourceLayers, 
                scrollY:"resourceVScroll"},
            {view: "scrollbar", id:"resourceVScroll"}
          ]
        },
        {view: "scrollbar", id:"scrollHor"}
    ]
};

In diesem Beispiel wurde ein zusätzliches Raster hinzugefügt, um Ressourcen und ihre Arbeitsbelastungen aufzulisten. Es gibt auch eine zusätzliche Zeitachse, um die Verteilung der Arbeitsstunden über einen Monat zu zeigen, wobei zwischen Standard- und Überstunden unterschieden wird.

Eigenschaften von benutzerdefinierten Raster- und Zeitachsenansichten

Benutzerdefinierte Raster- und Zeitachsenansichten haben zusätzliche Eigenschaften:

Für die Raster- und Zeitachsenansichten

bind - (string): Gibt die ID des Datenspeichers an, aus dem Daten abgerufen werden ("resource" im Beispiel).

Für die Zeitachsenansicht

bindLinks - (string): Gibt die Quelle der Links an oder null, wenn keine zugehörigen Links vorhanden sind.
layers - (array): Eine Konfigurationsoption, die addLayer()-Funktionen zur Definition der Datenstilisierung verwendet.

Hinzufügen eines Datenspeichers für benutzerdefinierte Ansichten

Um benutzerdefinierte Ansichten mit den richtigen Daten zu füllen, müssen Sie einen dedizierten Datenspeicher einrichten. Sie können einen neuen Datenspeicher mit der Methode gantt.createDatastore erstellen und dessen Konfiguration wie folgt definieren:

var resourcesStore = gantt.createDatastore({
    name: "resource",
    initItem: function(item) {
        item.id = item.key || gantt.uid();
        return item;
    }
});

In diesem Beispiel wird ein Datenspeicher mit dem Namen "resource" erstellt.

Um Daten in benutzerdefinierte Ansichten aus dem Datenspeicher zu laden, können Sie die Methode gantt.parse verwenden:

resourcesStore.parse([
    {key: '0', label: "N/A"},
    {key: '1', label: "John"},
    {key: '2', label: "Mike"},
    {key: '3', label: "Anna"}
]);

Wenn Sie das Konfigurationsobjekt eines bestimmten Datenspeichers erhalten müssen, kann Ihnen die Methode gantt.getDatastore helfen:

var tasksStore = gantt.getDatastore("task");

Diese Methode nimmt den Namen des Datenspeichers als Parameter.

Für eingebaute Ressourcenansichten kann Gantt automatisch den erforderlichen Datenspeicher erstellen. Erfahren Sie mehr hier.

Dynamisches Deaktivieren/Aktivieren von Resizern

Manchmal möchten Sie möglicherweise die Resizer zwischen den Gantt-Zellen dynamisch deaktivieren. Eine einfache Möglichkeit, dies zu tun, besteht darin, sie mithilfe von CSS auszublenden.

Hier ist eine CSS-Regel, die Sie verwenden können:

.no_resizers .gantt_resizer {
    display: none;
}

Um die Resizer auszublenden, fügen Sie einfach diese Klasse zum Gantt-Container hinzu:

gantt.$container.classList.add("no_resizers");

Wenn Sie die Resizer wieder anzeigen möchten, entfernen Sie einfach die Klasse:

gantt.$container.classList.remove("no_resizers");

HTML als innere Ansicht

Sie können auch benutzerdefiniertes HTML als Teil des Gantt-Layouts einfügen. Hier ist ein Beispiel:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", scrollX: "scrollHor", scrollY: "scrollVer"},
                {html: "<div class='custom-content'>custom content</div>", css: "custom-content", width: 50},
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {html: "<div class='custom-content'>custom content</div>", css: "custom-content", width: 50},
                {view: "scrollbar", id: "scrollVer"}
            ]
        },
        {view: "scrollbar", scroll: "x", id: "scrollHor"}
    ]
};

Erforderliche Ansichten und Einstellungen

Die Gantt-API enthält Methoden wie gantt.getTaskPosition, gantt.getTaskNode und gantt.getScrollState, die auf bestimmten Layout-Ansichten basieren. Damit diese Methoden ordnungsgemäß funktionieren, muss das Layout das Standardraster, die Zeitachse und Bildlaufleisten enthalten, mit ordnungsgemäß zugewiesenen IDs.

Hier erfahren Sie, wie Sie die erforderlichen Ansichten konfigurieren können:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", id: "grid", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollVer"}
            ]
        },
        {view: "scrollbar", id: "scrollHor"}
    ]
};

Die erforderlichen Ansichten und ihre IDs sind:

view: "grid", id: "grid"
view: "timeline", id: "timeline"
view: "scrollbar", id: "scrollHor"
view: "scrollbar", id: "scrollVer"

Wenn keine ID angegeben ist, verwendet Gantt entweder den Ansichtsname als Standard-ID oder generiert eine eindeutige. Für das Standardraster und die Zeitachse kann der "id"-Parameter weggelassen werden:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollVer"}
            ]
        },
        {view: "scrollbar", id: "scrollHor"}
    ]
};

Zusätzliche Ansichten können bei Bedarf hinzugefügt werden.

Konfigurationen und Vorlagen von Ansichten

Raster- und Zeitachsenansichten verwenden Vorlagen und Konfigurationen aus den globalen gantt.config und gantt.templates. Sie können diese Einstellungen jedoch für bestimmte Ansichten auf Layout-Ebene überschreiben.

Zum Beispiel:

var secondGridColumns = {
    columns: [
        {
            name: "status", label: "Status", width: 60, align: "center",
            template: function (task) {
                var progress = task.progress || 0;
                return Math.floor(progress * 100) + "";
            }
        },
        {
            name: "impact", width: 80, label: "Impact", template: function (task) {
                return (task.duration * 1000).toLocaleString("en-US", {
                    style: 'currency', currency: 'USD'
                });
            }
        }
    ]
};
 
gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", id: "grid", width: 320, scrollY: "scrollVer"},
                {resizer: true, width: 1},
                {view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {resizer: true, width: 1},
                {view: "grid", width: 120, bind: "task", scrollY: "scrollVer", config: secondGridColumns},
                {view: "scrollbar", scroll: "y", id: "scrollVer"}
            ]
        },
        {view: "scrollbar", id: "scrollHor", height: 20}
    ]
};

Ansichten können auch Konfigurationen und Vorlagen von ihrem übergeordneten Layout erben:

var resourceConfig = {    
    scale_height: 30      
};                        
 
gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", group: "grids", scrollY: "scrollVer"},
                {resizer: true, width: 1},
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollVer", group: "vertical"}
            ],
            gravity: 2
        },
        {resizer: true, width: 1},
        {
            config: resourceConfig,
            cols: [
                {view: "resourceGrid", group: "grids", width: 435, scrollY: "resourceVScroll"},
                {resizer: true, width: 1},
                {view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll"},
                {view: "scrollbar", id: "resourceVScroll", group: "vertical"}
            ],
            gravity: 1
        },
        {view: "scrollbar", id: "scrollHor"}
    ]
};

Weitere Details finden Sie im Artikel Resource Management.

Sichtbarkeitsgruppen

Manchmal möchten Sie möglicherweise die Sichtbarkeit bestimmter Layout-Elemente synchronisieren. Beispielsweise, wenn es horizontale Bildlaufleisten in benachbarten Zellen gibt, die zusammen erscheinen oder verschwinden sollen.

Ein weiterer Fall könnte sein, dass mehrere Raster in verschiedenen Reihen der Zeitachse die gleiche Breite beibehalten sollten. Wenn ein Raster geändert wird, sollten sich die anderen entsprechend anpassen.

Related sample: Resource load diagram

Die group-Eigenschaft einer Ansicht kann beide Szenarien handhaben. Ansichten mit demselben Gruppenwert synchronisieren ihre Sichtbarkeit oder Größe.

Für Bildlaufleisten bedeutet dies, dass alle Bildlaufleisten in der Gruppe erscheinen, wenn mindestens eine sichtbar ist. Für andere Zellen wird ihre Größe synchronisiert.

Hier ist ein Beispiel zur Synchronisierung der Sichtbarkeit von Bildlaufleisten:

gantt.config.layout = {
    css: "gantt_container",
    cols: [
        {
            width: 400,
            minWidth: 200,
            maxWidth: 600,
            rows: [
                {view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"},
                {view: "scrollbar", id: "gridScroll", group: "horizontal"}
            ]
        },
        {resizer: true, width: 1},
        {
            rows: [
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollHor", group: "horizontal"}
            ]
        },
        {view: "scrollbar", id: "scrollVer"}
    ]
};

Um die Breiten der Raster zu synchronisieren:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", group: "grids", scrollY: "scrollVer"},
                {resizer: true, width: 1},
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollVer", group: "vertical"}
            ],
            gravity: 2
        },
        {resizer: true, width: 1},
        {
            config: resourceConfig,
            cols: [
                {view: "resourceGrid", group: "grids", width: 435, scrollY: "resourceVScroll"},
                {resizer: true, width: 1},
                {view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll"},
                {view: "scrollbar", id: "resourceVScroll", group: "vertical"}
            ],
            gravity: 1
        },
        {view: "scrollbar", id: "scrollHor"}
    ]
};

Größenanpassung von Gantt-Layout-Teilen

Sie können die relativen Größen von Gantt-Layout-Zellen mit der gravity-Eigenschaft steuern. Diese Eigenschaft legt die Größe der Zellen im Verhältnis zueinander fest.

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                // Spaltenkonfiguration
            ],
            gravity: 2
        },
        {resizer: true, width: 1},
        {
            config: resourceConfig,
            cols: [
                // Spaltenkonfiguration
            ],
            gravity: 1
        },
        {view: "scrollbar", id: "scrollHor"}
    ]
};

In diesem Beispiel haben das Gantt-Diagramm und das Ressourcendiagramm ein Größenverhältnis von 2:1, was bedeutet, dass das Gantt-Diagramm 66% des Platzes einnimmt, während das Ressourcendiagramm 33% einnimmt. Für eine gleichmäßige Aufteilung verwenden Sie ein Verhältnis von 1:1.

Min/max Zellbreite

Um die Breite eines Layout-Teils während der Größenänderung zu begrenzen, können Sie die Eigenschaften minWidth und maxWidth verwenden:

gantt.config.grid_elastic_columns = true;
 
gantt.config.layout = {
    css: "gantt_container",
    cols: [
        {
            width: 400,
            minWidth: 200,
            maxWidth: 600,
            rows: [
                {view: "grid", scrollable: true, scrollX: "scrollHor1", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollHor1", scroll: 'x', group: 'hor'}
            ]
        },
        {resizer: true, width: 1},
        {
            rows: [
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollHor", scroll: 'x', group: 'hor'}
            ]
        },
        {view: "scrollbar", id: "scrollVer"}
    ]
};

Verstecken von übergeordneten Layout-Ansichten

Wenn Sie eine Layout-Ansicht ausblenden möchten, wenn alle ihre untergeordneten Elemente unsichtbar sind, können Sie hide_empty: true in der Layout-Zellenkonfiguration verwenden:

gantt.config.layout = {
    css: "gantt_container",
    cols: [
        {
            hide_empty: true,
            rows: [
                {view: "grid"}
            ]
        },
        {resizer: true},
        {
            hide_empty: true,
            rows: [
                {view: "timeline"}
            ]
        }
    ]
};

Wechseln zwischen Ansichten

Wenn Sie zwischen verschiedenen Layout-Ansichten umschalten müssen, finden Sie weitere Details in den Abschnitten How to toggle grid/chart und How to toggle the resource view.

Einfrieren von Spalten in der Rasteransicht

Um eine oder mehrere Spalten in einem Gantt-Diagramm einzufrieren, befolgen Sie die Schritte im Abschnitt How to freeze/fix columns in the grid.

Zurück nach oben