Linien

Übersicht

Das Erscheinungsbild der Linien, die Formen verbinden, wird durch den Modus bestimmt, in dem Sie ein Diagramm initialisieren: Standard, Organigramm, Mindmap oder PERT.

Linien im Standardmodus

Im Standardmodus von Diagram können verschiedene Formen durch "straight" (standardmäßig) oder "elbow"-Linien in der erforderlichen Reihenfolge verbunden werden, um ein Schema eines bestimmten Prozesses zu erstellen.

Um einer Linie im Standardmodus von Diagram/Diagram Editor Text hinzuzufügen, verwenden Sie die Eigenschaft text des Objekts lineTitle.

Linien im Organigramm-Modus

Der Organigramm-Modus von Diagram stellt ein Organigramm dar, das eine Reihe von Formen enthält, die durch "elbow"-Linien in hierarchischer Reihenfolge verbunden sind.

Sie können die vertikale Richtung der Verbindung von Formen für die übergeordnete Form über das Konfigurationsattribut dir: "vertical" des Formobjekts festlegen.

Linien im Mindmap-Modus

Der Mindmap-Modus von Diagram dient zur Darstellung einer weiteren Art von hierarchischem Diagramm. Die Formen werden durch "curved"-Linien verbunden und um eine zentrale Form herum angeordnet.

Der Modus ist nützlich, wenn Sie ein zentrales Thema oder eine zentrale Idee darstellen möchten, die von den Zweigen der Unterthemen umgeben ist.

Die Anordnung der untergeordneten Formen relativ zur Wurzelform wird automatisch durch den Hauptalgorithmus festgelegt. Um die Standardrichtung der untergeordneten Formen zu ändern, verwenden Sie die Konfigurationseigenschaft typeConfig bei der Initialisierung des Diagramms.

Links im PERT-Modus

Der PERT-Modus von Diagram dient zur Darstellung von Sequenzen aus Aufgaben und Projekten sowie der Verbindungen zwischen ihnen. Formen der Typen "task", "milestone" und "project" werden durch "links"-Verbinder verbunden.

Festlegen von Verbindungen zwischen Formen

Um Formen in Diagram zu verbinden, können Sie eine der folgenden zwei Methoden verwenden:

• Verwendung von Linienobjekten

Sie müssen separate Objekte angeben, die die Logik der Formverbindung beschreiben. Zum Beispiel:

const data = [
    // Formen
    { id: "1", text: "Chairman & CEO" },
    { id: "2", text: "Manager" },
    { id: "3", text: "Technical Director" },
    { id: "4", text: "Manager" },
    { id: "5", text: "Technical Director" },
    // Verbinder
    { "id": "1-2", "from": "1", "to": "2", "type": "dash" },
    { "id": "1-3", "from": "1", "to": "3", "type": "dash" },
    { "id": "1-4", "from": "1", "to": "4", "type": "line" },
    { "id": "1-5", "from": "1", "to": "5", "type": "line" }
];

Die Eigenschaft type im Linienobjekt ermöglicht es Ihnen, für jede Linie einen individuellen Typ festzulegen.

Hinweis

Siehe die vollständige Liste der Konfigurationseigenschaften eines Linienobjekts.

• Verwendung des Attributs "parent"

Hinweis

Diese Methode funktioniert nicht im Standardmodus von Diagram/Diagram Editor.

Sie können die Eigenschaft parent im Konfigurationsobjekt der Form angeben und die ID der übergeordneten Form als Wert festlegen:

const data = [
    // Formen
    { id: "1", text: "Chairman & CEO" },
    { id: "2", text: "Manager", parent: "1" },
    { id: "3", text: "Technical Director", parent: "1" },
    { id: "4", text: "Manager", parent: "1" },
    { id: "5", text: "Technical Director", parent: "1" }
];

In diesem Fall haben alle Verbinder denselben Typ.

Festlegen des Standard-Linientyps

Sie können über den Parameter lineType der Eigenschaft lineConfig des Diagram-Konfigurationsobjekts einen gemeinsamen Typ für alle Verbindungslinien des Diagramms festlegen:

const diagram = new dhx.Diagram("diagram_container", {
    type: "default",
    lineConfig: {
        lineType: "dash" // "dash" | "line"
    }
});
diagram.data.parse(data);

Der Wert des Parameters lineType wird angewendet, wenn das Linienobjekt die Eigenschaft type nicht enthält.

Festlegen des Verbindungstyps der Linie

Sie können den Verbindungstyp für die Linien des Diagramms über den Parameter connectType der Eigenschaft lineConfig des Diagram-Konfigurationsobjekts festlegen. Folgende Typen stehen zur Verfügung:

• "elbow" (der Standardtyp für den Standard- und den Organigramm-Modus von Diagram)
• "straight"
• "curved" (der Standardtyp für den Mindmap-Modus von Diagram). Beachten Sie, dass der Verbindungslinientyp "curved" nur im Mindmap-Modus von Diagram verwendet wird

const diagram = new dhx.Diagram("diagram_container", {
    type: "default",
    lineConfig: {
        connectType: "straight" // "elbow" | "straight" für den Standardmodus
    }
});
diagram.data.parse(data);

Der Wert des Parameters connectType wird angewendet, wenn das Linienobjekt die Eigenschaft connectType nicht enthält.