Diagrammu pievienošana lietotāja interfeisam palīdz stāstīt stāstus vizuāli pārliecinošā veidā. Bet kā to panākt, nerakstot garas formas kodu no jauna? Tas ir viegli. Viss, kas Jums nepieciešams, ir piemērota JavaScript diagrammu bibliotēka, lai datus pārvērstu gatavos gabalos.
Neatkarīgi no tā, vai vēlaties izveidot reāllaika diagrammas vai parādīt lietotājiem vēsturiskas tendences, šīs ir labākās izmantojamās JavaScript bibliotēkas.
Chart.js ir atvērtā pirmkoda JavaScript bibliotēka HTML diagrammu veidošanai. Tā ir viena no vienkāršākajām JavaScript vizualizācijas bibliotēkām, un tajā ir atbalsts līniju, joslu, izkliedes, virtuļu, sektoru, radaru, apgabalu un burbuļu diagrammām.
Viena no tās unikālajām funkcijām ir spēja animēt un pielāgot diagrammas, lai tās atbilstu jūsu lietotāja interfeisa (UI) vēlamajai pieredzei. Chart.js ir arī diezgan vienkārši integrējams. Neatkarīgi no tā, vai rakstāt vaniļas JavaScript vai izmantojat priekšgala steku, piemēram, React vai Angular, viss, kas jums jādara, ir instalēt Chart.js kā pakotni vai izsaukt to no CDN.
Saistīts:Kā izveidot diagrammu, izmantojot Chart.js
Galu galā tas pieņem X un Y masīvu, un viss kods darbojas vienkāršā objekta loģikā, lai diagrammu renderētu priekšgalā HTML kanvas, pamatojoties uz nolasītajiem datiem. Un jūs varat apvienot diagrammas, ja vēlaties.
Šeit ir ērta JavaScript diagrammu bibliotēka React programmētājiem. Izveidots ar React un D3.js kombināciju, Recharts izmanto mērogojamu vektorgrafiku (SVG), lai diagrammas renderētu galvenokārt programmā React. Tātad, ja izmantojat Vanilla JavaScript, iespējams, vēlēsities apsvērt citas diagrammu bibliotēkas iespējas.
Bibliotēka atbalsta 11 diagrammu veidus. Turklāt katra atveidotās diagrammas daļa programmā Recharts ir ne tikai React komponents, bet arī leģenda, asis un daudz kas cits, tā ir neatkarīga vecāka komponenta sastāvdaļa.
Līdz ar to jūs varat pielāgot katru komponentu, manipulējot ar rekvizītiem, kā vēlaties. Tas nozīmē, ka varat viegli pievienot un atsaistīt diagrammas daļas no veseluma, neietekmējot citus React komponentus.
CanvasJS ir daudzpusīgs, ātrs, vienkāršs, un tajā ir līdz 30 diagrammu tipiem, kas tiek renderēti HTML. divs nevis audekls. Tas ir arī ļoti pielāgojams, atbalsta animācijas un diagrammu kombinācijas. Viena no tās unikālajām funkcijām ļauj dinamiski mainīt diagrammas motīvu lietotāja saskarnē.
Papildus JavaScript priekšgala ietvariem, tas atbalsta diagrammu renderēšanu tādās servera puses tehnoloģijās kā PHP, ASP.NET un MVC skursteņi. Tas arī nodrošina vienkāršus risinājumus dokumentos dažādiem scenārijiem.
Bibliotēka pat nāk no profesionāla leņķa kā informācijas paneļa rīks datu vizualizēšanai no dažādām perspektīvām. Izmantojot canvasJS, ir viegli izveidot ar akcijām saistītas diagrammas. Un galu galā tam ir atsevišķi CDN krājumiem un vispārīgajām diagrammām.
Ja jūs neiebilstat, ka jūs nesasmērējat rokas, izveidojot SVG un deklarējot asis no nulles pirms faktiskās diagrammas uzzīmēšanas, ieteicams pārbaudīt D3.js, lai savā vietnē zīmētu diagrammas. Lai gan tas ir daudz detalizētāks nekā citas JavaScript diagrammu bibliotēkas, tas sniedz jums labāku izpratni par diagrammas apgabalu un tā saturu.
Fakts, ka tas ir jaudīgs un darbojas zemākā līmenī nekā citas JavaScript diagrammu bibliotēkas, padara to par ideālu rīku, ja veiktspēja ir augstākais mērķis. Tā API piedāvā iebūvētus CSS atribūtus, kas ļauj veidot diagrammas pēc saviem ieskatiem.
Un, tā kā jūs kontrolējat SVG konteineru, varat izveidot diagrammas motīvu, lai tas atbilstu jūsu lietotāja interfeisa dizainam. D3.js var būt tehnisks, kad sākat. Galu galā, tiklīdz jūs zināt, kā rīkoties, ar to varat izveidot gandrīz jebkura veida diagrammas.
Google diagrammas izmanto HTML5 un SVG, lai rakstītu pielāgotas diagrammas dokumenta objekta modelī (DOM). To ir viegli lietot, un tā dokumentācijā ir sniegts pietiekami daudz piemēru, lai jūs nejustos apmaldījies. Tas piedāvā arī iespēju izveidot savienojumu ar dažādiem datu avotiem, kas atbalsta diagrammu rīka protokolu.
Saistīts:Bezmaksas HTML veidnes, lai viegli izveidotu ātras vietnes
Tā nodrošina DataTable klasi, kas ļauj viegli sadalīt, filtrēt un modificēt datus atsevišķos kolonnu un rindu masīvos. Bibliotēka arī novērš nepieciešamību pēc papildu aprēķiniem diagrammas kodēšanas laikā. Piemēram, veidojot sektoru diagrammu, jums nav jāaprēķina datu procentuālais sadalījums. Tas to dara jūsu vietā.
Katrs Google diagrammas diagrammas veids ir JavaScript klase, un jūs varat viegli piešķirt datu objektu un pielāgošanas opcijas atsevišķiem mainīgajiem. Tādējādi tas ļauj tos nodot atsevišķi galvenajai diagrammu klasei. Patiešām, tā loģika ir glīta un visaptveroša.
ApexCharts.js ir atvērtā pirmkoda JavaScript bibliotēka reaģējošu diagrammu renderēšanai lietotāja saskarnē. Jūs to uzskatīsit par draudzīgu lietošanu, jo īpaši ar tā visaptverošo dokumentāciju.
ApexCharts.js ieguva savu reputāciju ar pielāgošanas opcijām, kas ļauj pielāgot diagrammas, lai tās pielāgotos dažādiem ekrāna izmēriem, neuztraucoties par papildu stilu. Tā atbalsta arī daudzus diagrammu veidus, ko izmanto ikdienas vizualizācijās.
Šī bibliotēka labi darbojas arī ar vairākām diagrammām. Viena no tās stiprajām pusēm ir dažādu diagrammu veidu apvienošana vienā režģī.
Chartist.js ir atvērtā pirmkoda projekts, kas izriet no tā iesaistītās kopienas neapmierinātības citās JavaScript diagrammu bibliotēkās. Tas izmanto iekļauto SVG, CSS un JavaScript kombināciju, lai zīmētu, veidotu, konfigurētu un visbeidzot renderētu diagrammas DOM.
Šajā diagrammu bibliotēkā ir arī dažāda veida diagrammas, kuras piedāvā daudzas citas bibliotēkas. Chartists.js spēcīgi atbalsta CSS animāciju un atsaucību. Tādējādi tā diagrammas izvadi dinamiski pielāgojas ekrāna izmēram.
Lai gan animācijas efekti ir unikāli, darbs ar šo bibliotēku iesācējiem var būt sarežģīts. Tomēr dokumentācijā sniegtie visaptverošie un rediģējamie piemēri būs noderīgi jebkurai pielāgošanai vai animācijām, ko vēlaties pievienot.
Neatkarīgi no tā, vai strādājat ar priekšgala JavaScript steku, TypeScript vai vienkāršu JavaScript, billboard.js ir vienkāršs un tā vērts. Tā ir uz D3 v4 balstīta JavaScript diagrammu bibliotēka.
Bibliotēka atbalsta 21 diagrammu veidu un piedāvā visaptverošus piemērus katram no tiem API dokumentos. Tas padara to viegli apgūstamu un uzticamu, lai ātri izveidotu vizualizācijas savā lietotāja saskarnē.
Saistīts:JavaScript ietvarus ir vērts apgūt
Viss kods, kas jums nepieciešams, lai izveidotu diagrammu ar billboard.js, atrodas objekta slānī, un datu ievietošana ir vienkārša, jo varat sadalīt datus atsevišķos masīvos, lai uzzīmētu tik daudz grafiku, cik vēlaties.
Pastāstiet stāstus savā vietnē, izmantojot JavaScript
Atvērtā pirmkoda rīki padara programmēšanu ātru un vienkāršu mūsdienu dienās. Diagrammas prezentācija ir viens no jūsu projekta posmiem, kurā varat ietaupīt pietiekami daudz laika, izmantojot kādu no šīm esošajām JavaScript diagrammu bibliotēkām.
Turklāt tiem ir papildu priekšrocība, padarot jūsu lietotni modulārāku un vieglāku, neliekot jums aptīt papildu skriptus.
Diagrammu zīmēšana ar JavaScript ietvariem ir tīmekļa valodas aisberga redzamā daļa. Ir neskaitāmi projekti, kas gaida izveidi. Laimīgu uzlaušanu!
JavaScript ir ļoti svarīga programmēšanas valoda, kas jāapgūst. Ja esat iesācējs, šeit ir daži projekti, kas palīdzēs uzlabot savas zināšanas.
Lasiet Tālāk
- Programmēšana
- JavaScript
- Web izstrāde
- Programmēšana
Idowu aizraujas ar jebko viedo tehnoloģiju un produktivitāti. Brīvajā laikā viņš spēlējas ar kodēšanu un pārslēdzas uz šaha galdu, kad viņam ir garlaicīgi, taču viņam patīk arī ik pa laikam atrauties no rutīnas. Viņa aizraušanās parādīt cilvēkiem ceļu par modernajām tehnoloģijām motivē viņu rakstīt vairāk.
Abonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam, lai saņemtu tehniskos padomus, pārskatus, bezmaksas e-grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu