Grundlegende Formensätze

Die DHTMLX-Diagram-Bibliothek bietet Ihnen Formensätze, mit denen Sie Ihr Diagramm erstellen können. Jeder Diagram-Modus – Standard, Organigramm, Mindmap und PERT – verfügt über einen Basissatz von Formtypen.

Tipp

Sie können eine Form eines beliebigen Typs in ein Diagramm einfügen, das in einem beliebigen Modus initialisiert wurde. Verwenden Sie den Namen der gewünschten Form als Wert des Attributs type innerhalb des Formobjekts, während Sie einen Datensatz zum Laden in das Diagramm vorbereiten.

Siehe die vollständige Liste der Konfigurationseigenschaften eines Formobjekts.

Formen im Standardmodus

Im default-Modus von Diagram umfasst der Basissatz Flussdiagramm-Formen. Sehen Sie sich die verfügbaren Typen von Flussdiagramm-Formen an:

Außerdem gibt es das Element "text", das einfachen Text darstellt, der in einem Diagramm als Form verwendet und mit anderen Formen verbunden werden kann.

Verwandtes Beispiel: Diagram Editor. Standardmodus. Breites Flussdiagramm

Hinweis

Sie können die Formen des Diagramms im Standardmodus gruppieren. Sehen Sie sich den zugehörigen Leitfaden an.

Eigenschaften

Informieren Sie sich über die Konfigurationseigenschaften speziell für Formen im default-Modus von Diagram und für Flussdiagramm-Formen und das Element "text".

Formen im Organigramm-Modus

Im Organigramm-Modus von Diagram umfasst der Basissatz zwei Formtypen: "card" und "img-card".

Jede Form vom Typ "card" besitzt einen Text und eine farbige Kopfzeile. Formen auf derselben Ebene haben Kopfzeilen derselben Farbe. Beispiele für "card"-Formen sehen Sie im folgenden Diagramm vom Typ Organigramm:

Verwandtes Beispiel: Diagram. Organigramm-Modus. Grundlegende Initialisierung

Der Typ "img-card" kann verwendet werden, um Formen mit Bildern hinzuzufügen. Vergessen Sie nicht, Bilder für die Karten über das Attribut img des Formobjekts anzugeben. Das folgende Organigramm wurde mit Formen vom Typ "img-card" erstellt:

Verwandtes Beispiel: Diagram Editor. Organigramm-Modus. Grundlegende Initialisierung

Eigenschaften

Informieren Sie sich über die Konfigurationseigenschaften speziell für Formen im Organigramm-Modus von Diagram, die "card"-Formen und die "img-card"-Formen.

Formen im Mindmap-Modus

Im mindmap-Modus von Diagram ist der Formtyp "topic" der grundlegende Typ. Jede Form besitzt einen Text und eine farbige Umrandung. Die Farbe der Umrandung hängt von der Ebene ab, zu der die Form gehört. Beispiele für "topic"-Formen sehen Sie im folgenden Diagramm vom Typ Mindmap:

Verwandtes Beispiel: Diagram. Mindmap-Modus. Grundlegende Initialisierung

Eigenschaften

Informieren Sie sich über die Konfigurationseigenschaften speziell für Formen im mindmap-Modus von Diagram und für die "topic"-Formen.

Formen im PERT-Modus

Die grundlegenden Formtypen im PERT-Modus von Diagram sind:

• der Typ "task" - eine Form mit einer Kopfzeile, die Termine und Dauer anzeigt:

• der Typ "milestone" - eine Form ohne Dauer, die einen wichtigen Punkt des Projekts kennzeichnet:

• der Typ "project" - ein Container, der verwendet wird, um die Formen der Typen "task" und "milestone" zu gruppieren:

Verwandtes Beispiel: Diagram. PERT-Diagramm. Initialisierung

Eigenschaften

Informieren Sie sich über die Konfigurationseigenschaften speziell für die "task"-Formen, die "milestone"-Formen und die "project"-Gruppe.

Festlegen des Formtyps

Um den Typ einer Form festzulegen, verwenden Sie die Eigenschaft type innerhalb des Formobjekts, während Sie eine entsprechende JSON-Struktur zum Laden in das Diagramm vorbereiten:

const data = [
    { "id": 1, "x": 280, "y": 0, "text": "Start", "type": "start" },
    { "id": 2, "x": 280, "y": 120, "text": "Read N", "type": "output" },
    { "id": 3, "x": 280, "y": 240, "text": "M=1\nF=2", "type": "process" },
    { "id": 4, "x": 280, "y": 360, "text": "F=F*M", "type": "process" },
    { "id": 5, "x": 280, "y": 480, "text": "Is M=N?", "type": "decision" }
];

Hinweis

Siehe die vollständige Liste der Konfigurationseigenschaften eines Formobjekts. Fügen Sie beim Erstellen von Datenobjekten für Formen aus den Basissätzen keine benutzerdefinierten Eigenschaften hinzu. Um eine benutzerdefinierte Eigenschaft hinzuzufügen, müssen Sie eine benutzerdefinierte Form erstellen.

Festlegen des Standard-Formtyps

Sie können außerdem den Standardtyp für alle Formen über das Attribut defaultShapeType des Diagram-Konfigurationsobjekts festlegen:

const diagram = new dhx.Diagram("diagram_container", {
    type: "default", // type: "org" | type: "mindmap" | type: "pert"
    defaultShapeType: "rectangle"
});
diagram.data.parse(data);

Dieser Wert wird angewendet, wenn das Konfigurationsobjekt einer Form die Eigenschaft type nicht enthält.