mxGraph
Nyílt forráskódú JavaScript Diagramm Library
Interaktív grafikon- és diagramalkalmazások létrehozása a nyílt forráskódú ingyenes JavaScript-diagramozási könyvtáron keresztül.
Az mxGraph egy nyílt forráskódú JavaScript-diagram-könyvtár, amely SVG- és HTML-diagramok megjelenítésére szolgál. Az mxGraph könyvtár használatához nincs szükség harmadik féltől származó szoftverre. A másik jó dolog, hogy nem igényel plugint, és gyakorlatilag bármilyen keretrendszerbe integrálható. Az mxGraph interaktív diagramok és grafikonok megjelenítésére szolgáló szolgáltatásokat biztosít. Az API biztosítja az összes általánosan szükséges funkciót a rajzoláshoz, az interakcióhoz és a kontextus diagramhoz való társításához.
Az API nagyon elterjedt architektúrát használ, ehhez egy HTML oldalak kezelésére alkalmas webszerver és egy JavaScriptet támogató webböngésző szükséges. Elsősorban egy JavaScript-fájlt használ, amely tartalmazza a könyvtár összes funkcióját. Ez a fájl betöltődik egy HTML weboldalra a JavaScript szakaszban, és a böngésző HTML-tárolójában fut le
Az mxGraph első lépései
Az mxGraph telepítésének javasolt módja az npm, amely az npm csomagkezelőn keresztül érhető el. Az mxGraph függőségként való használatához használja az npm install parancsot.
Telepítse az mxGraph-ot az npm-en keresztül
npm install mxgraph --save
Grafikonok generálása JavaScript API-n keresztül
A nyílt forráskódú mxGraph könyvtár lehetővé teszi diagramok vagy grafikonok JavaScript használatával történő létrehozását. Támogatja továbbá az összetett grafikonok módosítását új grafikonszerkesztők létrehozásával vagy azok testreszabásával. Először is létre kell hozni egy grafikont az adott tárolón belül, majd egyszerűen hozzáadhat cellákat a modellhez a grafikon elkészítéséhez. Könnyen hozzáadhat diagramcímeket és jegyzeteket helyezhet el több résztvevőhöz. A könyvtár további funkciókat is kínál, például vizuális effektusokat, felhasználói felület vezérlését és még sok mást.
Két grafikon egyesítése JavaScript segítségével
Az mxGraph lehetővé teszi a számítógépes programozók számára, hogy két grafikont egyesítsenek saját JavaScript-alkalmazásaikon belül. Először is létre kell hozni egy minta grafikont az adott tárolón belül. Kérjük, minden cellát fehér, félkövér címkével tegyen kerekre. Most hozza létre a második gráfmodellt tároló nélkül. Adjon hozzá cellákat a célmodellhez egyetlen lépésben a csúcsok egyéni azonosítóival. Most összevonhatja a második gráf modelljét az első gráf modelljébe.
Rajzolj rácsot JavaScript használatával
Az mxGraph könyvtár lehetővé teszi a szoftverfejlesztők számára, hogy dinamikusan rajzoljanak rácsot saját JavaScript-alkalmazásaikon belül. Könnyedén rajzolhat rácsot dinamikusan a HTML 5 vászon használatával. Először hozza létre a grafikont az adott tárolóban, és hozzon létre dinamikusan egy rácsot, amelyhez vászonra van szükség. Módosítania kell az eseményszűrést, hogy a vásznat tárolóként fogadja el. Most a c szükség esetén leolvassa a hátteret, és beállítja a rácsvonalak távolságát képpontokban. Most megrajzolja a tényleges rácsot.