mxGraph
Atvirojo kodo JavaScript diagramų biblioteka
Kurkite interaktyvias diagramas ir diagramas naudodami atvirojo kodo nemokamą „JavaScript“ diagramų biblioteką.
mxGraph yra atvirojo kodo JavaScript diagramų biblioteka, teikianti SVG ir HTML diagramų atvaizdavimo funkcijas. Norint naudoti mxGraph biblioteką, nereikia jokios trečiosios šalies programinės įrangos. Kitas geras dalykas yra tai, kad jam nereikia jokių įskiepių ir jį galima integruoti į beveik bet kokią sistemą. mxGraph suteikia funkcijas, skirtas interaktyvioms diagramoms ir diagramoms rodyti. API suteikia visas dažniausiai reikalingas funkcijas piešti, sąveikauti ir susieti kontekstą su diagrama.
API naudoja labai įprastą architektūrą, jai reikalingas žiniatinklio serveris, galintis tvarkyti HTML puslapius, ir žiniatinklio naršyklė, palaikanti JavaScript. Pirmiausia jis naudoja vieną „JavaScript“ failą, kuriame yra visos bibliotekos funkcijos. Tas failas įkeliamas į HTML tinklalapį „JavaScript“ skiltyje ir vykdomas naršyklės HTML konteineryje
Darbo su mxGraph pradžia
Rekomenduojamas mxGraph diegimo būdas yra npm, jis pasiekiamas per npm paketų tvarkyklę. Norėdami naudoti mxGraph kaip priklausomybę, naudokite npm install.
Įdiekite mxGraph per npm
npm install mxgraph --save
Generuokite grafikus naudodami „JavaScript“ API
Atvirojo kodo mxGraph biblioteka suteikia galimybę kurti diagramą ar grafikus naudojant JavaScript. Ji taip pat palaiko sudėtingų grafikų keitimą kuriant naujus grafikų rengyklės arba jas tinkinant. Pirmiausia turite sukurti grafiką duotame konteineryje, o tada galite lengvai pridėti langelių prie modelio, kad sukurtumėte diagramą. Galite lengvai pridėti diagramų pavadinimus ir įdėti pastabas keliems dalyviams. Bibliotekoje taip pat yra papildomų funkcijų, tokių kaip vaizdo efektai, vartotojo sąsajos valdymas ir kt.
Dviejų grafikų sujungimas naudojant „JavaScript“.
„mxGraph“ leidžia kompiuterių programuotojams sujungti du grafikus savo „JavaScript“ programose. Visų pirma, duotame konteineryje turite sukurti pavyzdinį grafiką. Padarykite visas ląsteles apvalias su balta, paryškinta etikete. Dabar sukurkite antrą diagramos modelį be sudėtinio rodinio. Pridėkite langelių prie tikslinio modelio vienu veiksmu, naudodami tinkintus viršūnių ID. Dabar galite sujungti modelį iš antrojo grafiko su pirmojo grafiko modeliu.
Tinklelio piešimas naudojant „JavaScript“.
„mxGraph“ biblioteka leidžia programinės įrangos kūrėjams dinamiškai nubrėžti tinklelį savo „JavaScript“ programose. Galite lengvai piešti tinklelį dinamiškai naudodami HTML 5 drobę. Pirmiausia sukurkite diagramą duotame konteineryje ir dinamiškai sukurkite tinklelį, kuriam reikia drobės. Turite pakeisti įvykių filtravimą, kad galėtumėte priimti drobę kaip sudėtinį rodinį. Dabar cjei reikia, išvalo foną ir nustato tinklelio linijų atstumą pikseliais. Dabar nubrėžia tikrąjį tinklelį.