9 Javascript bibliotēkas, lai izveidotu interaktīvas diagrammas
Tātad jums ir savās rokās tonnas datu, ar vairākiem mainīgajiem lielumiem, ka jums kaut kādā veidā ir jāsaņem paziņojums kādam citam. Viņiem būs grūti saprast neapstrādātus, neorganizētus datus. Tāpēc jums ir nepieciešama palīdzība no diagrammām. Web dizainā, diagrammas ir viens no labākajiem datu vizualizācijas rīkiem. To ir viegli nolasīt, viegli uz acīm un samērā viegli uzstādīt.
Bet pieņemsim, ka mēs darīsim kaut ko līdzīgu: pieņemsim pievienot diagrammām animāciju un interaktivitāti, lai lasītāji varētu ne tikai uzzināt kaut ko jaunu no diagrammas, bet arī spēlēt ar to. Tas ir patiešām vieglāk, nekā tas izklausās, pateicoties vairākām JS bibliotēkām. Pārbaudīsim tos.
1. JS diagramma
Chart.js bibliotēka, kas nav atkarīga, lai izveidotu diagrammas 6 dažādos veidos: līniju diagrammas, joslu diagrammas, radaru kartes, polāro apgabalu diagrammas, pīrāgu un donuta diagrammas. Bibliotēka ir sadalīta arī pēc diagrammas veida, lai jūsu lapas netiktu saspiestas ar to, kas nav nepieciešams. Tā atbalsta atsaucīgu dizainu un jūs varat viegli mainīt mainīgos, piemēram, krāsu vai animāciju, lai pielāgotu diagrammas interfeisu.
2. Chartists JS
Chartists JS ir lieliska bibliotēka, lai izveidotu atsaucīgas diagrammas, kas izmanto SVG. Papildus savai atsaucībai, Chartist sniedz jums elastību, izmantojot skaidru problēmu nodalīšanu: stilu ar CSS un kontroli ar JS. Lai atvieglotu pielāgošanu, tiek iekļauti SASS faili. Lieliski šeit ir, ka jums ir neierobežotas iespējas diagrammu animēt, izmantojot Chartist animācijas API, SMIL, kas sniedz jums papildu animācijas iespējas.
3. C3 JS
C3 JS ir bibliotēka, lai veidotu diagrammas, pamatojoties uz D3 JS. Tas aptver nepieciešamo kodu, lai izveidotu diagrammas ar D3 JS, lai jūs varētu izlaist D3 koda rakstīšanu un vienkārši ievadīt datus. C3 ir aprīkots ar dažādiem API, ko varat izmantot, lai viegli kontrolētu diagrammas. Lai pielāgotu savu diagrammu, norādiet savus pielāgotos stilus attiecīgajām CSS klasēm. Veidojiet diagrammas no vienkāršām līniju diagrammām, lai novērtētu diagrammas. Apskatiet šo lapu, lai redzētu, kā bibliotēka darbojas.
4. Flot
Flot ir jQuery plguin, lai izveidotu diagrammas ar interaktīviem elementiem, piemēram, sērijas ieslēgšana vai izslēgšana, datu punktu mijiedarbība, panoramēšana, tālummaiņa un vairāk. Flot nāk ar dažādām diagrammas tipa opcijām un, ja vēlaties diagrammā vairāk iespēju, šeit ir arī daži spraudņi, kurus varat izmantot arī. Diagrammas darbosies labi ar pārlūkiem, kas atbalsta HTML audeklus.
5. EChart
Echart ir pārsteidzoši visaptveroša bibliotēka no Ķīnas, kas atbalsta vairākus diagrammu veidus, var apstrādāt lielus datus (attēlojot līdz pat 200 000 datu punktu uz Dekarta skalas), tai ir mēroga viesabonēšana, spēja bez piepūles iegūt, integrēt un apmainīties ar datiem starp vairākām kartēm, ļaujot viens, lai viegli pārslēgtos no viena datu veida uz citu, un vēl daudz vairāk.
6. Peity
Peity pievienos mini diagrammu jūsu tīmekļa lapai. Tas ir mazs jQuery spraudnis, kas pārveido elementu par mini svg līnija, bārs, donuts vai pīrāgs. Jums tikai nepieciešams izveidot elementu un dot tādu vērtību kā 1/5 zvanu peity ('pie') par šo elementu, lai izveidotu mini piezīmju diagrammu. Piemēram, lai izveidotu donut diagrammu, kas ir tikai viena piektā daļa, šeit ir HTML:
1/5
Jūs varat pielāgot diagrammas krāsu, rādiusu, platumu un augstumu, bet pēc noklusējuma tas ir redzams mazā izmērā.
7. DC JS
DC JS tam ir līdzības ar C3 JS izmantotā dzinēja izteiksmē; viņi abi izmanto D3 bibliotēku, lai attēlotu diagrammas SVG. DC JS ir izveidots, lai palīdzētu jums vizualizēt datus un analīzi pārlūkiem un mobilajām ierīcēm. Tā kā tas izmanto D3 JS, tas ļauj jums pievienot diagrammu lietotāja mijiedarbībai. DC JS ir viena spēcīga bibliotēka, lai izveidotu diagrammas no vienkāršiem līdz lieliem sarežģījumiem.
8. Google diagramma
Izmantojot Google diagrammu, varat izveidot interaktīvas diagrammas un datu rīkus, izmantojot Google vizualizācijas API. Ir diagrammu galerijas, lai pārbaudītu Google diagrammas datu vizualizācijas iespējas. Lai sāktu, ieguliet vienkāršu JavaScript savā tīmekļa lapā, lai ielādētu vajadzīgās Google diagrammas bibliotēkas. Pēc tam uzskaitiet vēlamos datus un izveidojiet pielāgojumus, izmantojot diagrammas opcijas. Visbeidzot izveidojiet diagrammas objektu ar ID un savā tīmekļa lapā izveidojiet a NVD3 ir atkārtoti lietojamu diagrammu un diagrammas komponentu kopums, kas būvēti ar D3 JS. Tādējādi šī bibliotēka ir „veidne”, kas palīdzēs jums vieglāk veidot diagrammas. Šeit apskatiet daudzās NVD3 veidotās paraugu diagrammas.
9. NVD3
Tagad lasiet: JavaScript bibliotēkas, lai izveidotu interaktīvas un pielāgotas kartes
