1. Produkte
  2.   Diagramm
  3.   JavaScript
  4.   mxGraph 

mxGraph 

 
 

Open-Source-JavaScript-Diagrammbibliothek

Generieren Sie interaktive Diagramm- und Diagrammanwendungen über die kostenlose Open-Source-JavaScript-Diagrammbibliothek.

mxGraph ist eine Open-Source-JavaScript-Diagrammbibliothek, die Funktionen zum Rendern von SVG- und HTML-Diagrammen bereitstellt. Für die Verwendung der mxGraph-Bibliothek ist keine Software von Drittanbietern erforderlich. Die andere gute Sache ist, dass es keine Plugins benötigt und in praktisch jedes Framework integriert werden kann. mxGraph bietet Funktionen zur Anzeige interaktiver Diagramme und Grafiken. Die API bietet alle allgemein erforderlichen Funktionen zum Zeichnen, Interagieren mit und Verknüpfen eines Kontexts mit einem Diagramm.

Die API verwendet eine sehr verbreitete Architektur, sie erfordert einen Webserver, der HTML-Seiten verarbeiten kann, und einen Webbrowser, der JavaScript unterstützt. Es verwendet hauptsächlich eine JavaScript-Datei, die alle Bibliotheksfunktionen enthält. Diese Datei wird in einem JavaScript-Abschnitt in eine HTML-Webseite geladen und in einem HTML-Container im Browser ausgeführt

Previous Next

Erste Schritte mit mxGraph

Der empfohlene Weg zur Installation von mxGraph ist über npm, es ist über den npm-Paketmanager verfügbar. Um mxGraph als Abhängigkeit zu verwenden, verwenden Sie npm install.

Installieren Sie mxGraph über npm

npm install mxgraph --save

Generieren Sie Diagramme über die JavaScript-API

Die Open-Source-mxGraph-Bibliothek bietet Funktionen zum Erstellen eines Diagramms oder von Grafiken mit JavaScript. Es unterstützt auch das Ändern komplexer Diagramme, indem neue Diagrammeditoren erstellt oder angepasst werden. Zuerst müssen Sie ein Diagramm innerhalb des angegebenen Containers erstellen und dann können Sie dem Modell ganz einfach Zellen hinzufügen, um das Diagramm zu erstellen. Sie können ganz einfach Diagrammtitel hinzufügen und Notizen über mehrere Teilnehmer platzieren. Die Bibliothek bietet auch zusätzliche Funktionen wie visuelle Effekte, Steuerung der Benutzeroberfläche und mehr.

Zusammenführen von zwei Diagrammen über JavaScript

mxGraph ermöglicht Computerprogrammierern, zwei Graphen in ihren eigenen JavaScript-Anwendungen zusammenzuführen. Zunächst müssen Sie ein Beispieldiagramm innerhalb des angegebenen Containers erstellen. Bitte runden Sie alle Zellen mit einer weißen, fetten Beschriftung ab. Erstellen Sie nun bitte das zweite Graphmodell ohne Container. Fügen Sie dem Zielmodell Zellen in einem einzigen Schritt hinzu, indem Sie benutzerdefinierte IDs für die Scheitelpunkte verwenden. Jetzt können Sie das Modell aus dem zweiten Graphen mit dem Modell des ersten Graphen zusammenführen.

Raster mit JavaScript zeichnen

Die mxGraph-Bibliothek ermöglicht es Softwareentwicklern, ein Raster dynamisch in ihren eigenen JavaScript-Anwendungen zu zeichnen. Mit HTML 5-Canvas können Sie ganz einfach ein Raster dynamisch zeichnen. Erstellen Sie zuerst das Diagramm innerhalb des angegebenen Containers und erstellen Sie dynamisch ein Raster, das eine Leinwand erfordert. Sie müssen die Ereignisfilterung ändern, um Leinwand als Container zu akzeptieren. Löscht jetzt den Hintergrund, falls erforderlich, und legt den Abstand der Gitterlinien in Pixeln fest. Zeichnet nun das eigentliche Raster.

 Deutsch