9 Javascript knjižnice za izgradnju interaktivnih grafikona
Dakle, u ruci imate tona podataka, s nizom varijabli, da morate nekako prenijeti nekome drugome. Neobrađeni, neorganizirani podaci bit će im teško razumjeti. Zato trebate pomoć iz grafikona. U web dizajnu, Karte su jedan od najboljih alata za vizualizaciju podataka. Lak je za čitanje, jednostavan za oči i relativno jednostavan za postavljanje.
Ali uzmimo stvari na vrhunac: hajde dodajte animacije i interaktivnost tim grafikonima, tako da čitatelji mogu ne samo naučiti nešto novo iz grafikona, nego i igrati s njim. To je zapravo lakše nego što zvuči, zahvaljujući brojnim JS knjižnicama. Provjerimo ih.
1. Grafikon JS
Chart.js je biblioteka bez ovisnosti za izradu grafikona u 6 različitih vrsta: linijski grafikoni, stupčasti grafikoni, radarske karte, karte polarnih područja, grafikoni za kolače i kolače. Knjižnica je također podijeljena prema vrsti grafikona tako da vaše stranice nisu zaglavljene s onim što nije potrebno. Podržava odgovarajući dizajn i jednostavno možete mijenjati varijable kao što su boja ili animacija kako biste prilagodili sučelje karte.
2. Chartist JS
Chartist JS je velika knjižnica za izgradnju odgovarajućih grafikona koji koriste SVG. Osim što reagira, Chartist vam daje fleksibilnost pomoću jasnog razdvajanja pitanja: stil s CSS-om i kontrola s JS-om. Kako bi se olakšala prilagodba, uključene su SASS datoteke. Velika je stvar što imate neograničene mogućnosti za animiranje grafikona pomoću API-ja Chartistove animacije, SMIL, koji vam daje dodatne opcije animacije.
3. C3 JS
C3 JS je biblioteka za izradu grafikona temeljenih na D3 JS. Zaokružuje traženi kod za izradu grafikona s D3 JS, tako da možete preskočiti pisanje D3 koda i samo unijeti svoje podatke. C3 dolazi s različitim API-jem koje možete koristiti za jednostavno upravljanje grafikonima. Da biste prilagodili grafikon, definirajte vlastite prilagođene stilove za zadane CSS klase. Izradite grafikone od jednostavnih linija do grafikona. Pogledajte ovu stranicu da biste vidjeli kako knjižnica funkcionira.
4. Flot
Flot je jQuery plguin za stvaranje grafikona s interaktivnim elementima kao što je uključivanje ili isključivanje serije, interakcije podatkovnih točaka, pomicanje, zumiranje i drugo. Flot dolazi s različitim opcijama tipa grafikona, a ako želite više mogućnosti na grafikonu, ovdje su i neki dodaci koje možete koristiti. Karte će dobro funkcionirati s preglednicima koji podržavaju HTML platna.
5. EChart
Echart je zapanjujuće opsežna knjižnica iz Kine koja podržava više vrsta grafikona, može obraditi velike podatke (crtanje do 200.000 točaka podataka na kartezijanskom grafikonu), ima skalu roaminga, mogućnost da bez problema izvadi, integrira i razmijeni podatke između više grafikona, jedan za jednostavno prebacivanje s jednog tipa podataka na drugi, i još mnogo toga.
6. Ljubaznost
Peity će dodati vašu web-stranicu mini grafikon. To je mali jQuery plugin koji pretvara element u mini svg linija, traka, krafna ili tortni grafikon. Vi samo trebate stvoriti element i dati vrijednost poput 1/5 i upućivanje poziva peity ( 'kolača') na taj element napraviti mini tortni grafikon. Na primjer, da biste stvorili oznaku krafne koja je samo jedna petina istaknuta, ovdje je HTML:
1/5
Boju grafikona, radijus, širinu i visinu možete prilagoditi, ali je zadano prikazano u maloj veličini.
7. DC JS
DC JS ima sličnosti s C3 JS u smislu upotrebe motora; oboje koriste D3 knjižnicu za prikaz grafikona u SVG-u. DC JS je stvoren kako bi vam pomogao vizualizirati podatke i analize za preglednike i mobilne uređaje. Budući da se koristi na D3 JS, omogućuje vam dodavanje korisničke interakcije vašem grafikonu. DC JS je jedna moćna biblioteka za stvaranje dijagrama od jednostavnih do visokih složenosti.
8. Google Chart
Možete stvoriti interaktivne grafikone i alate podataka pomoću API-ja za Google vizualizaciju putem Google grafikona. Postoje galerije grafikona za provjeru mogućnosti vizualizacije podataka usluge Google Chart. Da biste pokrenuli, na web-stranicu ugradite jednostavan JavaScript da biste učitali potrebne biblioteke usluge Google Chart. Zatim navedite podatke koje želite ucrtati i napravite neke prilagodbe kroz opcije grafikona. Napokon napravite objekt grafikona s ID-om, a na svojoj web-stranici napravite a NVD3 je skup višekratnih grafikona i komponenti grafikona koje su izgrađene s D3 JS. Ta je knjižnica stoga "predložak" koji će vam olakšati izradu grafikona. Provjerite ovdje mnogo primjera grafikona napravljenih s NVD3.
9. NVD3
Sada čitajte: JavaScript biblioteke za stvaranje interaktivnih i prilagođenih karata
