mxGraph
Atvērtā pirmkoda JavaScript diagrammu bibliotēka
Ģenerējiet interaktīvas diagrammas un diagrammu lietojumprogrammas, izmantojot atvērtā pirmkoda bezmaksas JavaScript diagrammu bibliotēku.
mxGraph ir atvērtā pirmkoda JavaScript diagrammu bibliotēka, kas nodrošina SVG un HTML diagrammu renderēšanas funkcionalitāti. Lai izmantotu mxGraph bibliotēku, nav nepieciešama trešās puses programmatūra. Otra labā lieta ir tā, ka tai nav nepieciešami spraudņi un to var integrēt praktiski jebkurā sistēmā. mxGraph nodrošina līdzekļus, kas paredzēti interaktīvu diagrammu un grafiku attēlošanai. API nodrošina visu parasti nepieciešamo funkcionalitāti, lai zīmētu, mijiedarbotos ar un saistītu kontekstu ar diagrammu.
API izmanto ļoti izplatītu arhitektūru, tai ir nepieciešams tīmekļa serveris, kas spēj apstrādāt HTML lapas, un tīmekļa pārlūkprogramma, kas atbalsta JavaScript. Tas galvenokārt izmanto vienu JavaScript failu, kas satur visas bibliotēkas funkcijas. Šis fails tiek ielādēts HTML tīmekļa lapā JavaScript sadaļā un tiek izpildīts pārlūkprogrammas HTML konteinerā
Darba sākšana ar mxGraph
Ieteicamais mxGraph instalēšanas veids ir npm, tas ir pieejams, izmantojot npm pakotņu pārvaldnieku. Lai izmantotu mxGraph kā atkarību, izmantojiet npm install.
Instalējiet mxGraph, izmantojot npm
npm install mxgraph --save
Ģenerējiet grafikus, izmantojot JavaScript API
Atvērtā pirmkoda mxGraph bibliotēka nodrošina funkcionalitāti diagrammu vai grafiku izveidei, izmantojot JavaScript. Tā atbalsta arī sarežģītu grafiku modificēšanu, izveidojot jaunus grafiku redaktorus vai pielāgojot tos. Pirmkārt, jums ir jāizveido grafiks dotajā konteinerā un pēc tam varat viegli pievienot modelim šūnas, lai izveidotu grafiku. Varat viegli pievienot diagrammu nosaukumus un ievietot piezīmes vairākiem dalībniekiem. Bibliotēka nodrošina arī papildu funkcijas, piemēram, vizuālos efektus, lietotāja interfeisa vadību un daudz ko citu.
Divu grafiku sapludināšana, izmantojot JavaScript
mxGraph ļauj datorprogrammētājiem apvienot divus grafikus savās JavaScript lietojumprogrammās. Pirmkārt, jums ir jāizveido diagrammas paraugs dotajā konteinerā. Lūdzu, izveidojiet visas šūnas apaļas ar baltu, treknu etiķeti. Tagad, lūdzu, izveidojiet otro diagrammas modeli bez konteinera. Pievienojiet šūnas mērķa modelim vienā darbībā, izmantojot virsotņu pielāgotos ID. Tagad jūs varat sapludināt modeli no otrā grafika ar pirmās diagrammas modeli.
Režģa zīmēšana, izmantojot JavaScript
mxGraph bibliotēka ļauj programmatūras izstrādātājiem dinamiski zīmēt režģi savās JavaScript lietojumprogrammās. Varat viegli dinamiski uzzīmēt režģi, izmantojot HTML 5 audeklu. Vispirms, lūdzu, izveidojiet diagrammu dotajā konteinerā un dinamiski izveidojiet režģi, kam nepieciešams audekls. Jums ir jāmaina notikumu filtrēšana, lai audekls tiktu pieņemts kā konteiners. Tagad cizmanto fonu, ja nepieciešams, un iestata režģa līniju attālumu pikseļos. Tagad zīmē faktisko režģi.