Swimlanes

Swimlane-Übersicht

Eine Swimlane stellt ein rechteckiges Element des Diagram dar, das aus Zellen (oder Spuren) besteht, die vertikal oder horizontal angeordnet sind. Jede Zelle (type: "$sgroup") kann untergeordnete Elemente wie Formen oder Groups enthalten.

Hinweis

Swimlanes sind nur im Standardmodus von Diagram/Diagram Editor verfügbar (type: "default").

Swimlanes helfen Ihnen, jeden Prozess (geschäftlich, fertigungsbezogen, dienstleistungsbezogen oder jeden anderen) oder seine einzelnen Teile von Anfang bis Ende zu visualisieren.

Swimlanes erstellen

Um eine Swimlane zu erstellen, müssen Sie type: "$swimlane" und die Struktur des Swimlane-Layouts innerhalb des Swimlane-Objekts definieren, während Sie einen Datensatz zum Laden in das Diagram vorbereiten:

const data = [
    // Swimlane konfigurieren
    {
        type: "$swimlane",
        height: 500,
        width: 850,
        // das Layout einer Swimlane muss mindestens eine Zelle enthalten
        layout: [
            [1] // die Zelle mit id:"1" und type:"$sgroup"
        ]
    }
];

// Diagram initialisieren
const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

Das obige Codebeispiel zeigt die einfachste Konfiguration einer Swimlane mit Standardeinstellungen (d. h. ohne Kopfzeile und Zwischenüberschrift).

Swimlane-Struktur

Die Struktur einer Swimlane kann sehr unterschiedlich sein. Sie wird über die Konfigurationseigenschaft layout des Swimlane-Objekts definiert. Mit dieser Eigenschaft können Sie die Zellen einer Swimlane in Zeilen und Spalten anordnen.

Sie müssen lediglich ein Array mit einer Matrix als Wert der Eigenschaft angeben. Die Matrix kann entweder ein Array sein:

// eine Swimlane mit 3 Spalten
layout: [
    [1, 2, 3]
]

oder eine Reihe von durch Kommas getrennten Arrays:

// eine Swimlane mit 2 Zeilen und 3 Spalten
layout: [
    [1, 2, 3],
    [4, 5, 6]
]

wobei:

jede Zelle im Layout eine eindeutige Nummer hat;
die Anzahl der Arrays die Anzahl der Zeilen bestimmt (wenn es mehrere Arrays gibt, muss die Anzahl der Zellen in allen Arrays gleich sein);
die Anzahl der Zellen im Array die Anzahl der Spalten bestimmt.

Eigenschaften eines Swimlane-Objekts

Sehen Sie sich die vollständige Liste der Konfigurationseigenschaften eines Swimlane-Objekts an, um je nach Bedarf verschiedene Swimlanes mit unterschiedlichen Einstellungen erstellen zu können.

Swimlane-Zelle konfigurieren

Wenn Sie eine Swimlane auf der Seite initialisieren, werden die ID einer Swimlane-Zelle sowie ihre Konfiguration automatisch generiert. Um die Standardkonfiguration der Zelle zu ändern, erstellen Sie ein Objekt der Zelle, das die Attribute type: "$sgroup" und id enthalten muss, und geben Sie dort die erforderlichen Konfigurationseinstellungen an:

const data = [
    // Swimlane konfigurieren
    {
        type: "$swimlane",
        id: "main",
        height: 500,
        width: 850,
        layout: [
            [1, 2, 3]
        ]
    },
    // Swimlane-Zelle konfigurieren
    {
        type: "$sgroup",
        id: 3,
        style: {
            fill: "#D4DAE4"
        }
    }
];

Eigenschaften eines Zellenobjekts

Sehen Sie sich die vollständige Liste der Konfigurationseigenschaften einer Swimlane-Zelle an.

Zellen gruppieren

Wenn Sie für jede Zelle eine eindeutige Nummer angeben, werden alle Zellen mit Rändern gerendert:

layout: [
    [1, 2, 3],
    [4, 5, 6]
]

Bei Bedarf können Sie einen Bereich von Zellen gruppieren und die Ränder zwischen ihnen entfernen. Wählen Sie dazu eine beliebige Zelle aus dem Bereich aus und ersetzen Sie die eindeutigen Nummern der Zelle(n) aus dem Bereich durch die Nummer dieser Zelle.
Hier ist ein Beispiel für die Gruppierung der ersten beiden Zellen in der ersten Zeile:

layout: [
    [1, 1, 3],
    [4, 5, 6]
]

Das Ergebnis sieht folgendermaßen aus:

Hier ist ein Beispiel für die Gruppierung der Zellen in der zweiten Spalte:

layout: [
    [1, 2, 3],
    [4, 2, 6]
]

Das Ergebnis:

Größen einer Swimlane und ihrer Zellen

Die Größe der Swimlane wird durch die Konfigurationsattribute width und height der Swimlane bestimmt.

const data = [
    // Swimlane konfigurieren
    {
        type: "$swimlane",
        id: "main",
        height: 500,
        width: 850,
        layout: [
            [1, 2, 3]
        ]
    }
];

Zellenbreite

Die Breite einer Zelle hängt von der Breite der Swimlane, der Anzahl der Spalten und der Höhe der linken/rechten Swimlane-Kopfzeile und -Zwischenüberschrift ab. Zum Beispiel:

const data = [
    {
        type: "$swimlane",
        id: "main",
        height: 500,
        width: 830,
        layout: [
            // 3 Spalten
            [1, 2, 3]
        ],
        header: {
            position: "left",
            height: 40
        },
        subHeaderRows: {
            enable: true,
            position: "left",
            height: 40
        }
    }
];

Die Breite jeder Zelle kann als (830-40-40)/3 = 250 berechnet werden.

Zellenhöhe

Die Höhe einer Zelle hängt von der Höhe der Swimlane, der Anzahl der Zeilen und der Höhe der oberen/unteren Swimlane-Kopfzeile und -Zwischenüberschrift ab. Zum Beispiel:

const data = [
    {
        type: "$swimlane",
        id: "main",
        height: 500,
        width: 830,
        layout: [
            // 2 Zeilen
            [1, 2, 3],
            [4, 5, 6]
        ],
        header: {
            position: "top",
            height: 40
        },
        subHeaderCols: {
            enable: true,
            position: "top",
            height: 40
        }
    }
];

Die Höhe jeder Zelle kann als (500-40-40)/2 = 210 berechnet werden.

Swimlane-Übersicht​

Swimlanes erstellen​

Swimlane-Struktur​

Eigenschaften eines Swimlane-Objekts​

Swimlane-Zelle konfigurieren​

Eigenschaften eines Zellenobjekts​

Zellen gruppieren​

Größen einer Swimlane und ihrer Zellen​

Zellenbreite​

Zellenhöhe​