mxGraph
Open Source JavaScript Diagramming Library
Vytvářejte interaktivní aplikace pro grafy a grafy prostřednictvím bezplatné knihovny diagramů JavaScriptu s otevřeným zdrojovým kódem.
mxGraph je open source knihovna pro tvorbu diagramů JavaScriptu, která poskytuje funkce pro vykreslování diagramů SVG a HTML. K použití knihovny mxGraph není vyžadován žádný software třetí strany. Další dobrá věc je, že nevyžaduje žádné pluginy a lze jej integrovat do prakticky jakéhokoli rámce. mxGraph poskytuje funkce určené k zobrazení interaktivních diagramů a grafů. Rozhraní API poskytuje všechny běžně požadované funkce pro kreslení, interakci a přiřazování kontextu k diagramu.
API používá velmi běžnou architekturu, vyžaduje webový server schopný zpracovávat HTML stránky a webový prohlížeč, který podporuje JavaScript. Primárně používá jeden soubor JavaScript, který obsahuje všechny funkce knihovny. Tento soubor se načte na webovou stránku HTML v sekci JavaScript a spustí se v kontejneru HTML v prohlížeči
Začínáme s mxGraph
Doporučený způsob instalace mxGraph je přes npm, je dostupný přes správce balíčků npm. Chcete-li použít mxGraph jako závislost, použijte npm install.
Nainstalujte mxGraph prostřednictvím npm
npm install mxgraph --save
Generování grafů přes JavaScript API
Open source knihovna mxGraph poskytuje funkce pro vytváření diagramů nebo grafů pomocí JavaScriptu. Podporuje také úpravu složitých grafů vytvářením nových editorů grafů nebo jejich přizpůsobením. Nejprve je potřeba vytvořit graf uvnitř daného kontejneru a poté můžete do modelu snadno přidat buňky pro sestavení grafu. Můžete snadno přidat názvy diagramů a umístit poznámky k více účastníkům. Knihovna také poskytuje další funkce, jako jsou vizuální efekty, ovládání uživatelského rozhraní a další.
Sloučení dvou grafů pomocí JavaScriptu
mxGraph umožňuje počítačovým programátorům sloučit dva grafy v rámci jejich vlastních aplikací JavaScript. V první řadě je potřeba vytvořit ukázkový graf uvnitř daného kontejneru. Udělejte prosím všechny buňky kulatými bílým, tučným štítkem. Nyní prosím vytvořte druhý model grafu bez kontejneru. Přidejte buňky do cílového modelu v jediném kroku pomocí vlastních ID pro vrcholy. Nyní můžete sloučit model z druhého grafu do modelu prvního grafu.
Kreslicí mřížka pomocí JavaScriptu
Knihovna mxGraph umožňuje vývojářům softwaru dynamicky kreslit mřížku uvnitř jejich vlastních aplikací JavaScript. Mřížku můžete snadno kreslit dynamicky pomocí HTML 5 canvas. Nejprve prosím vytvořte graf uvnitř daného kontejneru a vytvořte dynamicky mřížku, která vyžaduje plátno. Je třeba upravit filtrování událostí tak, aby bylo plátno přijímáno jako kontejner. Nyní cv případě potřeby vymaže pozadí a nastaví vzdálenost čar mřížky v pixelech. Nyní nakreslí skutečnou mřížku.