9 Javascript knjižnice za izgradnjo interaktivnih grafikonov
Torej imate v roki ton podatkov, s številnimi spremenljivkami, ki jih morate nekako posredovati nekomu drugemu. Surovi, neorganizirani podatki bodo težko razumeli. Zato potrebujete pomoč iz grafikonov. V spletnem oblikovanju, grafikoni so eno najboljših orodij za vizualizacijo podatkov. Je enostaven za branje, enostaven za oči in relativno enostaven za nastavitev.
Ampak vzemimo stvari zaznamek tem grafikonom dodajte animacijo in interaktivnost, tako da bralci ne morejo le naučiti nekaj novega iz grafikona, ampak se tudi igrajo z njim. Pravzaprav je lažje, kot se sliši, zahvaljujoč številnim JS knjižnicam tam zunaj. Poglejmo jih.
1. Graf JS
Chart.js je knjižnica brez odvisnosti za izdelavo grafikonov v 6 različnih vrstah: linijski grafikoni, stolpčni grafikoni, radarske karte, polarne grafikone, grafikoni s pitami in krofi. Knjižnica je prav tako razdeljena glede na vrsto grafikona, tako da vaše strani niso obogatene s tem, kar ni potrebno. Podpira odziven dizajn in lahko preprosto spremenite spremenljivke, kot sta barva ali animacija, da prilagodite vmesnik grafikona.
2. Chartist JS
Chartist JS je odlična knjižnica za izdelavo odzivnih grafikonov, ki uporabljajo SVG. Poleg odzivnosti vam Chartist omogoča tudi fleksibilnost z uporabo jasnega ločevanja pomislekov: slog s CSS in nadzor z JS. Za lažje prilagajanje so vključene datoteke SASS. Najboljša stvar je, da imate neomejene možnosti za animacijo grafikona z API-jem Chartist animacije, SMIL, ki vam nudi dodatne možnosti animacije.
3. C3 JS
C3 JS je knjižnica za izdelavo grafikonov na osnovi D3 JS. Potrebno kodo zaokroži za izdelavo grafikonov z D3 JS, tako da lahko preskočite pisanje kode D3 in vnesete podatke. C3 prihaja z različnimi API-ji, ki jih lahko uporabite za enostavno upravljanje grafikonov. Če želite prilagoditi grafikon, določite lastne sloge po meri za dane razrede CSS. Ustvarite grafikone od preprostih linijskih grafikonov do grafikonov. Oglejte si to stran, da vidite, kako deluje knjižnica.
4. Flot
Flot je orodje jQuery za ustvarjanje grafikonov z interaktivnimi elementi, kot so vklop ali izklop serije, interakcije podatkovnih točk, premikanje, povečevanje in drugo. Flot prihaja z različnimi možnostmi tipa grafikona in če želite več zmožnosti na grafikonu, je tu tudi nekaj vtičnikov, ki jih lahko uporabite. Karte bodo dobro delovale z brskalniki, ki podpirajo HTML-platna.
5. EChart
Echart je neverjetno obsežna knjižnica iz Kitajske, ki podpira več vrst grafikonov, lahko obdeluje velike podatke (načrtovanje do 200.000 podatkovnih točk na kartezičnem grafikonu), ima lestvico gostovanja, zmožnost, da brez težav izvleče, integrira in izmenjuje podatke med več grafikoni, eno za preprosto preklapljanje iz ene vrste podatkov v drugo in še veliko več.
6. Peity
Ljubezen bo vaši spletni strani dodal mini grafikon. Je majhen jQuery vtičnik, ki pretvarja element v mini svg vrstica, vrstica, krof ali tortni grafikon. Samo ustvariti morate element in dati vrednost kot 1/5 in pokličite ljubezen („pita“) na ta element narediti mini tortni grafikon. Če želite na primer ustvariti grafikon s krofi, ki je označen le za eno petino, tukaj je HTML:
1/5
Barvo grafa, radij, širino in višino lahko prilagodite, vendar je privzeto prikazana v majhni velikosti.
7. DC JS
DC JS ima podobnosti s C3 JS v smislu uporabljenega motorja; oba uporabita knjižnico D3 za upodabljanje grafikonov v SVG. DC JS je ustvarjen, da vam pomaga vizualizirati podatke in analize za brskalnike in mobilne naprave. Ker izkorišča na D3 JS, vam omogoča, da v grafikon dodate interakcijo uporabnika. DC JS je zmogljiva knjižnica za ustvarjanje grafikonov od enostavnih do visokih zahtevnosti.
8. Google Chart
Z Google API-jem za ustvarjanje interaktivnih grafikonov in podatkovnih orodij lahko uporabite Google Visualization API. Obstajajo galerije grafikonov, ki preverjajo zmožnosti vizualizacije podatkov v Google Chartu. Če želite začeti, v svojo spletno stran vdelajte preprost JavaScript, da naložite knjižnice Google Chart, ki jih potrebujete. Nato navedite podatke, ki jih želite kartirati, in naredite nekaj prilagoditev z možnostmi grafikona. Na koncu ustvarite predmet grafikona z ID-jem in na svoji spletni strani ustvarite a NVD3 je niz večkrat uporabnih grafikonov in komponent grafikona, ki so zgrajene z D3 JS. Ta knjižnica je torej »predloga«, ki vam bo pomagala, da boste lažje gradili grafikone. Oglejte si številne vzorčne grafikone, izdelane z NVD3 tukaj.
9. NVD3
Zdaj preberite: Knjižnice JavaScript za ustvarjanje interaktivnih in prilagojenih zemljevidov
