DHTMLX Diagram-Übersicht
DHTMLX Diagram ist eine clientseitige Diagrammkomponente, mit der Sie Beziehungen zwischen Objekten, Konzepten oder Lebewesen in visueller Form darstellen können: als Schema, Diagramm, Organigramm, Mindmap usw. Das Diagramm erleichtert die übersichtliche und zugängliche Darstellung von unübersichtlichen und umfangreichen Informationen.
Diagram im Standardmodus
DHTMLX Diagram bietet Ihnen die Möglichkeit, mithilfe eines vordefinierten Satzes von Formen und Verbindungslinien verschiedene Diagramme zu erstellen und mit deren Aussehen zu experimentieren.
Sie können Formen der gewünschten Typen auswählen, sie mit passenden Verbindungslinien verknüpfen und einen beliebigen Diagrammtyp erstellen, der die Abfolge von Vorgängen darstellt, aus denen sich ein bestimmter Prozess zusammensetzt, wie im folgenden Beispiel:
| Datenplanungsmodell | Vertikaler Entscheidungsbaum | Breites Flussdiagramm |
|---|---|---|
 |  |  |
| Entscheidungsbaum | Aktivitätsdiagramm |
|---|---|
 |  |
Benutzerdefinierte Formen
Sie können eigene Formvorlagen erstellen und damit jedes gewünschte Diagramm gestalten. Zum Beispiel können Sie folgende bekannte benutzerdefinierte Diagramme erstellen:
| Lebenszyklus-Diagramm | Venn-Diagramm-Vorlage | UML-Klassendiagramm-Vorlage |
|---|---|---|
 |  |  |
| Netzwerkdiagramm-Vorlage | Spiellevel und Schauplätze |
|---|---|
 |  |
Gruppen
Sie können einfache oder komplexere Schemata erstellen, indem Sie Formen mithilfe eines Diagram-Elements namens Gruppe auf unterschiedliche Weise gruppieren. Sie können sowohl einstufige als auch verschachtelte Gruppen erstellen und deren Aussehen und Verhalten konfigurieren. Weitere Details finden Sie im Artikel Gruppen.
| Diagram Editor. Standardmodus. Virtual-Private-Cloud-Architektur |
|---|
 |
Swimlanes
Mit Swimlanes in der DHTMLX Diagram-Bibliothek können Sie jeden Prozess (Geschäfts-, Fertigungs-, Serviceprozess oder einen beliebigen anderen) oder einzelne Teile davon von Anfang bis Ende darstellen. Weitere Details finden Sie im Artikel Swimlanes.
| Diagram. Standardmodus. Swimlane-Vorlage |
|---|
 |
Linientitel
Linientitel sind im Standardmodus von Diagram aktiviert. Sie können Text hinzufügen, indem Sie doppelt auf eine Linie klicken. Mit einem Doppelklick können Sie den Text auch bearbeiten. Weitere Details finden Sie im Artikel Linientitel.
Diagram im Organigramm-Modus
Außerdem gibt es einen Organigramm-Modus von Diagram, der eine Reihe von Formen zeigt, die durch Linien in hierarchischer Reihenfolge miteinander verbunden sind.
Assistenten- und Partnerformen
Eine übergeordnete Form auf einer beliebigen Ebene kann Assistenten- oder Partnerelemente enthalten. Die Assistenten- und Partnerformen können keine übergeordneten Elemente sein. Die Assistenten- und Partnerelemente können im Editor hinzugefügt oder durch Vorbereiten eines Datensatzes erstellt werden.
In der hierarchischen Reihenfolge werden die Assistentenelemente zwischen den übergeordneten und den untergeordneten Formen angezeigt.
| Diagram Editor. Organigramm-Modus. Grundlegende Initialisierung |
|---|
 |
Die Verbindung zwischen der übergeordneten Form und ihren Partnerelementen ist immer horizontal. Außerdem werden die Verbindungen zwischen der übergeordneten Form und all ihren untergeordneten Formen horizontal, sobald Sie ein Partnerelement für eine übergeordnete Form hinzufügen, selbst wenn die Verbindungen zuvor vertikal waren.
Partnerformen sind sehr nützlich, um einen Stammbaum zu erstellen.
Verwandtes Beispiel: Diagram Editor. Organigramm-Modus. Stammbaum
Hier sehen Sie Beispiele dafür, wie die Verbindungen übergeordneter Formen mit einem, zwei, drei und vier Partnern aussehen.
| Ein Partner | Zwei Partner |
|---|---|
 |  |
| Drei Partner | Vier Partner |
|---|---|
 |  |
Benutzerdefinierte Formen
Ein Beispiel für das Hinzufügen benutzerdefinierter Formen zur Erstellung eines Diagramms, das die hierarchische Organisationsstruktur einer medizinischen Einrichtung darstellt:
| Diagram Editor. Organigramm-Modus. Vorlage für medizinisches Hierarchiediagramm |
|---|
 |
Diagram im Mindmap-Modus
Der Mindmap-Modus wird verwendet, um ein zentrales Thema oder eine zentrale Idee darzustellen, die von den Zweigen der Unterthemen umgeben ist.
| Diagram. Mindmap-Modus. Emotionen-Mindmap |
|---|
 |
Die Formen sind durch gebogene Linien verbunden und um eine zentrale Form des Diagramms herum angeordnet.
Benutzerdefinierte Formen
Ein Beispiel für das Hinzufügen einer benutzerdefinierten Vorlage in den Mindmap-Modus des Diagramms, um eine Sitemap zu erstellen:
Diagram im PERT-Modus
Der PERT-Modus wird verwendet, um die Abfolgen von Aufgaben und Projekten sowie die Verbindungen zwischen ihnen zu visualisieren. Er ist auch nützlich, um den kritischen Pfad zu ermitteln und Projekte zu planen.
Diagram im PERT-Modus verwendet die DHTMLX-Gantt-Datenstruktur, die eine einfache Interaktion zwischen den Komponenten ermöglicht. Beim Laden eines Gantt-Datensatzes ordnet ein Diagram im PERT-Modus Aufgaben und Projekte automatisch anhand der Verbindungen zwischen ihnen an.
Integration von PERT-Diagram und DHTMLX Gantt
Nachfolgend finden Sie ein Beispiel für die Integration eines Diagram im PERT-Modus und eines Gantt-Diagramms:
Formensuche
DHTMLX Diagram bietet Ihnen eine Reihe von API, die Sie nutzen können, um die Arbeit mit einem Diagram komfortabler zu gestalten. Sie können beispielsweise eine Formensuche implementieren, die Ihnen die Arbeit mit großen Diagrammen erleichtert.
Diagram-Skalierung
Sie können die Zoom-Vorlage auf Ihr Diagramm anwenden, um dessen Erscheinungsbild durch Vergrößern oder Verkleinern zu ändern. Außerdem können Sie dem Benutzer ermöglichen, detaillierte Informationen zur ausgewählten Form abzurufen.
Wie geht es weiter
Jetzt können Sie sich mit der Verwendung von DHTMLX Diagram Editor in Ihrer Anwendung vertraut machen. Lesen Sie die Diagram-Editor-Übersicht, um mehr über dieses Tool zu erfahren.