Die DHTMLX-Diagrammbibliothek besteht aus verschiedenen Arten von Diagrammen, von denen das am weitesten verbreitete das JavaScript-Flussdiagramm ist, mit dem jede Art von Arbeitsablauf, Prozess oder System angezeigt werden kann. Sie können die Testversion von DHTMLX-Diagramm herunterladen und es selbst ausprobieren.
Oben ( klicken Sie hier, um eine Rezension zu lesen>> ) haben wir die Anwendungsszenarien von Javascript-Flussdiagrammen vorgestellt, wie die Flussdiagramme Daten visualisieren usw. In diesem Artikel wird weiterhin erläutert, warum wir das DHTMLX-Diagrammsteuerelement zum Erstellen von Javascript-Flussdiagrammen verwenden sollten!
Laden Sie die offizielle Version des DHTMLX-Diagramms herunter
Warum sollten Sie sich für DHTMLX Diagram entscheiden, um ein Javascript-Flussdiagramm zu erstellen?
Die Fähigkeit, Flussdiagramme zu manipulieren, ist für die Workflow-Visualisierung wichtig, und eine umfangreiche und flexible API bietet Möglichkeiten, das Ziel zu erreichen, und Benutzer können damit Javascript/HTML5-Flussdiagramme einrichten.
1. Einrichten von Flussdiagrammelementen mit mehreren Konfigurationsoptionen
Wenn Sie mit der Erstellung von JavaScript-Flussdiagrammen mit DHTMLX beginnen , werden Sie die vielen nützlichen Konfigurationsoptionen zu schätzen wissen. An dieser Stelle können Sie den Standardtyp von Formen und Linien, Ränder zwischen Formen, eine Symbolleiste mit Formsymbolen, Tooltips und mehr festlegen.
Wenn Sie einen bestimmten Flussdiagramm-Formtyp in der DHTMLX-Bibliothek bereitstellen müssen, legen Sie ihn einfach als Wert in der Type-Eigenschaft innerhalb des Formobjekts fest. Verwenden Sie in ähnlicher Weise das Attribut „type“ im Linienobjekt, um den Linientyp eines einzelnen Verbinders anzugeben.
Um beim Vorbereiten von Daten für komplexe Flussdiagramme Zeit zu sparen, können Sie mit der Eigenschaft „defaults“ Standardkonfigurationen für alle Formen und Verbindungslinien gleichzeitig festlegen, was auch zur Verbesserung der Codelesbarkeit beiträgt.
2. Passen Sie jedes Flussdiagrammelement individuell an und gestalten Sie es entsprechend Ihren Anforderungen
Ein weiterer wichtiger Vorteil der JavaScript-Diagrammbibliothek ist die verbesserte Anpassbarkeit. Benutzer können Formen und Verbindungszeilen in ihren Objekten formatieren und die entsprechenden CSS-Klassen neu definieren. So stellt die Anpassung des Erscheinungsbilds der Hauptelemente des Flussdiagramms an die Anforderungen des Projekts kein Problem dar und der Textinhalt in den Formen kann durch Inline-Bearbeitung problemlos geändert werden.
Als ob das noch nicht genug wäre, besteht auch die Möglichkeit, benutzerdefinierte Flussdiagrammformen zu erstellen und Vorlagen dafür zu definieren. Um dem Flussdiagramm eine eigene Form hinzuzufügen, sollten Sie die Methode addShape verwenden.
3. Bearbeiten Sie die Form frei über die API und nehmen Sie bei Bedarf Änderungen vor
Das js-Flussdiagramm von DHTMLX Diagram ist äußerst flexibel, wenn es um die Bearbeitung von Diagrammelementen über die API der Komponente geht .
Wenn Sie beispielsweise ein großes Flussdiagramm erstellen möchten, ohne die gesamte Struktur in der richtigen Reihenfolge anzuordnen, gibt es einen speziellen Algorithmus für das automatische Layout, der Ihnen dabei helfen kann, diese Aufgabe schneller zu erledigen. Der Algorithmus wandelt eine Reihe zufällig verbundener Formen in eine ästhetisch ansprechende Hierarchie mit orthogonaler oder radialer Positionierung der Formen um. Bei der automatischen Platzierung können Sie Formen mithilfe diagonaler (Direktmodus) oder rechtwinkliger (Kantenmodus) Anschlüsse verbinden.
Diese Funktion wird auf zwei Arten aktiviert:
- Verwenden Sie das Autoplacement-Attribut:
const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);
diagram.autoPlace({
mode: "direct"| "edges",
placeMode: "orthogonal"|"radial"
});- Verwenden Sie die autoPlace()-Methode:
const diagram = new dhx.Diagram(document.body, {
type: "default",
autoplacement: {
mode: "direct"| "edges",
placeMode: "orthogonal"|"radial",
}
});Mithilfe der zugehörigen Datenerfassungs-API ist es möglich, neue Formen hinzuzufügen, alte zu löschen und sogar Diagramme von Grund auf zu erstellen.
Mit der Add-Methode können Sie dem Flussdiagramm neue Formen hinzufügen:
diagram.data.add({id:"3.2", text:"New Item", parent:"3"});Das Entfernen einiger unerwünschter Formen oder sogar aller Formen kann mit der Methode „remove“ erfolgen:
diagram.data.remove(3.2);
diagram.data.removeAll();Wenn Sie mit den bereits vorhandenen Formen zufrieden sind, deren Inhalt jedoch verbessert werden muss, können Sie die Aktualisierungsmethode anwenden, um neue Daten in die Formen einzufügen.
diagram.data.update("1", {text:"Some new text"});4. Erstellen Sie umfassende Flussdiagramme, die leicht zu lesen und zu analysieren sind
Dank der Zoom- und Scrollfunktionen stören breite Flussdiagramme mit großen Datenmengen Sie und Ihre Endbenutzer nicht mehr. Unter Berücksichtigung der Größe des Flussdiagramms können Sie mit Hilfe der Scale-Eigenschaft hinein- oder herauszoomen:
var diagram = new dhx.Diagram (diagram"diagram_container", {type: "org", scale: 0.7});
diagram.data.parse(data);Eine weitere Option besteht darin, horizontales und/oder vertikales Scrollen hinzuzufügen, um das Flussdiagramm anzuzeigen.
Um Endbenutzern die Arbeit mit komplexen Strukturen zu erleichtern, können Sie Flussdiagramme auch mit Swimlanes ergänzen, die dabei helfen, den gesamten Visualisierungsprozess in unabhängige Phasen zu unterteilen, wie in diesem Beispiel.
Eine weitere nützliche Funktion ist hier die Möglichkeit, knifflige Teile des Flussdiagramms durch Überschriften auf Verbindungslinien zu verdeutlichen.
5. Flussdiagramm in PNG und PDF exportieren
Wenn Sie Ihr Flussdiagramm als PNG oder PDF exportieren, können Sie Ihre Prozessvisualisierung einfach speichern, speichern und mit anderen teilen.
Die PDF- oder PNG-Exportmethoden ermöglichen nicht nur den Export von Diagrammen, sondern auch die Anpassung der Exporteinstellungen:
//export with config settings
diagram.export.png({
type:"jpeg"
fullPage: true
});6. Bieten Sie eine nahtlose Front-End- und Back-End-Integration
Was wirklich zählt, ist, dass unsere Javascript-Flussdiagramme in jede Webanwendung integriert werden können, die mit jeder clientseitigen und serverseitigen Technologie erstellt wurde, und dass die Daten problemlos im JSON-Format in das Diagramm geladen werden können. Die von uns bereitgestellten Demos vermitteln Ihnen ein klares Verständnis dafür, wie Sie DHTMLX Diagram in Anwendungen integrieren, die auf gängigen JavaScript-Frameworks (Angular, React, Vue.js) basieren. Mit DHTMLX Diagram funktionieren Ihre Flussdiagramme auf jedem Touchscreen-Gerät und allen modernen Browsern gleich gut.
7. Erstellen Sie ein Flussdiagramm im DHTMLX-Diagrammeditor
Alternativ zur allgemeinen Codierungsmethode können Sie auch den Diagrammeditor verwenden, der als ergänzendes Tool zu unserer Diagrammbibliothek mit drei Betriebsarten (Standard, Organigramm, Mindmap) dient. Durch die Einbettung des Editors in Ihre Anwendung können Endbenutzer mithilfe von mehr als 30 integrierten Formen Flussdiagramme und andere Arten von Diagrammen auf codefreie Weise erstellen. Es verfügt über eine benutzerfreundliche Oberfläche, unterstützt Drag & Drop und besteht aus vier Hauptteilen:
- Eine Symbolleiste, die den gesamten Bearbeitungsprozess steuert;
- Wählen Sie im linken Bereich die gewünschte Form aus.
- Rasterbereiche zur Interaktion mit Formen;
- Rechtes Bedienfeld zum Ändern des Erscheinungsbilds des Diagramms.
Was die Funktionen betrifft, unterstützt der Editor die Hauptfunktionen von Diagrammkomponenten, wie automatische Layout-Algorithmen, benutzerdefinierte Formen, schwimmende Linien, Inline-Bearbeitung usw. Zur bequemen Verwendung benutzerdefinierter Formen können Sie beide Bedienfelder des Editors anpassen.
Darüber hinaus bietet der Editor auch einige einzigartige Funktionen. Beispielsweise ist es möglich, mehrere Formen auszuwählen und einige grundlegende Vorgänge gleichzeitig auszuführen (ziehen, kopieren, einfügen, löschen), benutzerdefinierte Symbolleisten für Formen festzulegen, spezielle Hotkey-Kombinationen zu verwenden, um die Gestaltung ähnlicher Formen zu beschleunigen usw.
Zusätzlich zum Auto-Layout-Algorithmus können Endbenutzer Formen im Editor mithilfe von Ausrichtungslinien und mehreren Ausrichtungs- und Verteilungsoptionen präzise organisieren.
