mxGraph
Bibliotecă de diagrame JavaScript open source
Generați aplicații interactive de grafice și diagrame prin intermediul Bibliotecii de diagrame JavaScript gratuite cu sursă deschisă.
mxGraph este o bibliotecă de diagrame JavaScript open source care oferă funcționalitate pentru redarea diagramelor SVG și HTML. Nu este necesar niciun software terță parte pentru a utiliza biblioteca mxGraph. Un alt lucru bun este că nu necesită pluginuri și poate fi integrat în aproape orice cadru. mxGraph oferă caracteristici menite să afișeze diagrame și grafice interactive. API-ul oferă toate funcționalitățile necesare în mod obișnuit pentru a desena, a interacționa cu și a asocia un context cu o diagramă.
API-ul folosește o arhitectură foarte comună, necesită un server web care să aibă capacitatea de a gestiona pagini HTML și un browser web care acceptă JavaScript. Utilizează în principal un fișier JavaScript care conține toate funcționalitățile bibliotecii. Fișierul respectiv este încărcat într-o pagină web HTML într-o secțiune JavaScript și se execută într-un container HTML din browser
Noțiuni introductive cu mxGraph
Modul recomandat de a instala mxGraph este prin npm, este disponibil prin managerul de pachete npm. Pentru a utiliza mxGraph ca dependență, utilizați npm install.
Instalați mxGraph prin npm
npm install mxgraph --save
Generați grafice prin API-ul JavaScript
Biblioteca open source mxGraph oferă funcționalitate pentru crearea unei diagrame sau grafice folosind JavaScript. De asemenea, acceptă modificarea graficelor complexe prin crearea de noi editori de grafice sau personalizarea acestora. Mai întâi, trebuie să creați un grafic în interiorul containerului dat și apoi puteți adăuga cu ușurință celule la model pentru a construi graficul. Puteți adăuga cu ușurință titluri diagramelor și puteți plasa note peste mai mulți participanți. Biblioteca oferă, de asemenea, funcții suplimentare, cum ar fi efecte vizuale, controlul interfeței cu utilizatorul și multe altele.
Îmbinarea a două grafice prin JavaScript
mxGraph le permite programatorilor să îmbine două grafice în propriile aplicații JavaScript. În primul rând, trebuie să creați un exemplu de grafic în interiorul containerului dat. Vă rugăm să rotunjiți toate celulele cu o etichetă albă, îndrăzneață. Acum vă rugăm să creați al doilea model de grafic fără un container. Adăugați celule la modelul țintă într-un singur pas folosind ID-uri personalizate pentru vârfuri. Acum puteți îmbina modelul din al doilea grafic în modelul primului grafic.
Desenați grila folosind JavaScript
Biblioteca mxGraph permite dezvoltatorilor de software să deseneze dinamic o grilă în propriile aplicații JavaScript. Puteți desena cu ușurință o grilă dinamic folosind pânza HTML 5. Mai întâi vă rugăm să creați graficul în interiorul containerului dat și să creați dinamic o grilă care necesită o pânză. Trebuie să modificați filtrarea evenimentelor pentru a accepta pânza ca container. Acum caflați fundalul dacă este necesar și setează distanța liniilor de grilă în pixeli. Acum desenează grila reală.