Exista o multime de biblioteci JavaScript pentru redarea datelor dvs. numerice, simple si plictisitoare, interactive si informative. Frumusetea utilizarii JavaScript pentru vizualizarea datelor este ca, daca sunt create corect, datele dvs. vor fi foarte accesibile, de obicei prin intermediul tabelelor HTML.
In acest articol veti regasi douazeci de biblioteci JavaScript pe care le puteti folosi pentru a va aduce datele la viata, pentru reprezentarea grafica a datelor, totul fara costuri.
- 1. Highcharts
Highcharts este una dintre cele mai promitatoare biblioteci de diagrame JavaScript care au aparut recent, cu o gama larga de caracteristici, inclusiv sapte tipuri de diagrame (linie, placa si bara printre ele), capacitatea de a mari si micsora diagrame si sfaturi pentru instrumente pentru oferind mai multe informatii despre punctele de date. Biblioteca are multe optiuni de personalizare si sunt bine documentate pe o singura pagina pentru o referire usoara.
- 2. Graphael
gRaphael este o biblioteca de grafice bazata pe Raphael, o biblioteca JavaScript de desene de grafica vectoriala. Biblioteca este impartita in sub-biblioteci, astfel incat sa puteti descarca tipul de diagrama pe care sunteti interesat sa il creati. Cu biblioteca principala, g.raphael.js, la numai 12 KB si sub-biblioteci intre 4 KB si 8 KB, aceasta poate fi o solutie de grafica JavaScript usoara, dar cu caracteristici complete pentru dezvoltatorii web.
- 3. Kit de instrumente JavaScript InfoVis
JavaScript InfoVis , o biblioteca de diagrame influentata partial de MooTools, este o solutie robusta si excelenta pentru vizualizarea datelor. Este modular (la fel ca MooTools), astfel incat sa puteti include doar partile de care aveti nevoie pentru a va mentine paginile luminoase. Are capacitatea de efecte de animatie pentru a captiva si a implica utilizatorii dvs., o multime de tipuri de diagrame, o clasa de ajutor pentru lucrul cu date JSON si multe altele.
- 4. jQuery Visualize Plugin
Daca utilizati deja jQuery, ar fi constient de performanta sa cautati pluginuri pentru cerintele dvs. de vizualizare. jQuery Visualize , un plugin dezvoltat de Filament Group (dezvoltatorii de baza ai jQuery UI), este un plugin jQuery pentru generarea de diagrame folosind elementul canvas HTML5. Are 14 optiuni pentru personalizarea graficelor.
Nu uitati sa incercati demonstratia lor configurabila.
- 5. Moochart
Deocamdata, moochart prezinta numai diagrame cu bule, dar exista planuri de extindere a acestui plugin MooTools 1.2 pentru a prezenta grafice cu placi, linie si bare. Pluginul are 14 optiuni pe care le puteti folosi pentru a personaliza aspectul diagramei si sfaturi pentru a oferi mai multe informatii despre o bule atunci cand treceti cu mouse-ul peste ele. moochart este open source si este lansat sub licenta MIT.
- 6. Diagrame JS
JS Charts se mandreste cu o utilizare usoara, punand accent pe capacitatea utilizatorului final de a folosi biblioteca cu putina sau deloc codificare, ceea ce o face ideala pentru designerii web care doresc sa creeze diagrame de date fara sa petreaca prea mult timp invatand cum sa scrie JavaScript. JS Charts are o interfata grafica bazata pe web si ofera gazduire pentru diagramele dvs. pentru a elimina un pic de sarcina de pe propriile servere. Accepta trei tipuri de diagrame: bara, placinta si linie.
- 7. Digrafii
dygraphs este o biblioteca de vizualizare JavaScript pentru producerea de diagrame interactive pentru date din seria temporala. A fost conceput pentru a reprezenta seturi de date dense (cum ar fi fluctuatiile de temperatura). Are optiuni de interfata cu utilizatorul, care ofera utilizatorului posibilitatea de a specifica intervale de timp din mers, afisarea valorilor atunci cand trece cu mouse-ul peste parti ale diagramei si zoom.
De asemenea, se integreaza cu API-ul de vizualizare Google.
- 8. JSXGraph
JSXGraph , dezvoltat la Universitatea din Bayreuth din Germania, este o biblioteca JavaScript autonoma pentru trasarea formelor geometrice complexe si a datelor, cum ar fi curbele Bezier, ecuatii diferentiale si multe altele. Are functii de animatie pentru mutarea graficelor, componente interactive, cum ar fi glisoare pentru experimentarea valorilor variabile ale variabilelor si o multime de tipuri de diagrame din care sa alegeti.
- 9. Protochart
Protochart este o biblioteca JavaScript pentru utilizare cu cadrul Prototype JS. Foloseste panza HTML5 pentru browserele moderne si biblioteca ExCanvas pentru suport pentru Internet Explorer. Are sase tipuri de diagrame, inclusiv linie, placinta, bare, puncte, linii cu puncte si grafice cu zone.
Permite afisarea de legende care sunt extrem de configurabile pentru a ajuta la identificarea elementelor din diagramele dvs.
- 10. Bluf
Bluff este o biblioteca de grafice usoara care port bijuteria Ruby Gruff la JavaScript. Cantarind doar 11 KB gzip (aveti nevoie si de JS.Class care cantareste doar 2,6 KB gzip), este surprinzator ca veti putea obtine 15 tipuri diferite de diagrame din aceasta biblioteca. Dispune de sfaturi cu instrumente, o multime de optiuni configurabile, suport pentru legende si metoda .set_theme pentru declararea temelor reutilizabile.
- 11. Diagrama de stil
Style Chart este un serviciu web/API gratuit de diagrame bazat pe JavaScript pentru crearea de diagrame gazduite. Este disponibil si ca biblioteca descarcabila in cazul in care doriti sa gazduiti propriile grafice (desi trebuie sa va inregistrati pentru a o descarca). Are lucrurile pe care le-ati astepta de la o biblioteca de diagrame robusta si configurabila, cum ar fi sfaturi cu instrumente, legende si 19 tipuri de diagrame, inclusiv grafice 3D, grafice cu bare 3D si diagrame Pareto.
- 12. jqPlot
jqPlot este un alt plugin jQuery pentru vizualizarea datelor dezvoltat de Chris Leonello. Este open source, care incorporeaza doua seturi de licente: MIT si GPL versiunea 2. Are multe optiuni de care puteti profita pentru a va personaliza cu adevarat diagramele.
- 13. jQuery Sparklines
jQuery Sparklines este un plugin jQuery simplu si usor pentru a reprezenta diagrame sparklines dinamice (un grafic de date condensat). Se pune accent pe usurinta in utilizare si codificarea minima; puteti crea linii sparkline complexe cu o singura linie de cod JavaScript. Cand este miniat si zip, pluginul cantareste doar 4,7 KB, astfel incat sa nu impotmoleasca mult timpii de raspuns a paginii.
- 14. jQuery Google Charts
jQuery Google Charts (abreviat ca jGCharts), dezvoltat de Massimiliano Balestrieri, este un plugin jQuery de vizualizare a datelor pentru lucrul cu API-ul Google Charts. Are o multime de tipuri de diagrame, inclusiv o diagrama circulara 3D care este generata dinamic. Are o interfata grafica in dezvoltare (inca in versiune alpha), care va va permite sa creati diagrame cu usurinta cu un front-end grafic.
- 15. Diagrama cu placi cu instrumente
Aceasta clasa/plugin MooTools este pentru trasarea diagramelor circulare folosind elementul canvas. Se bazeaza pe Canvas Pie de Stoyan Stefanov. Este o optiune simpla si simpla de vizualizare a datelor pentru dezvoltatorii MooTools care sunt interesati doar sa creeze diagrame circulare.
- 16. TufteGraph
TufteGraph este un plugin jQuery care pune accent pe usurinta de utilizare si minimalism. Va ofera doar cateva optiuni pentru stil si se bazeaza in schimb pe CSS pentru personalizarea aspectului graficelor dvs., ceea ce inseamna, in cele din urma, ca paginile dvs. web se vor reda mai rapid, deoarece JS trebuie sa functioneze mai putin. Urmariti acest videoclip introductiv la TufteGraph.
- 17. Cronologie
Cronologia este un widget JavaScript pentru crearea cronologiei interactive. Puteti parcurge articolele prezentate in ordine cronologica utilizand rotita mouse-ului sau tinand apasat butonul mouse-ului pe cronologia si tragand la stanga sau la dreapta. Facand clic pe un punct, care reprezinta un element din linia temporala, vor dezvalui mai multe informatii.
Timeline este open source, lansat sub licenta BSD.
- 18. Protovis
Protovis este o biblioteca de vizualizare a datelor pentru graficarea datelor. Protovis a fost creat de Stanford Visualization Group. Utilizeaza JavaScript si SVG pentru a va reprezenta datele in mod dinamic.
Protovis este open source lansat sub licenta BSD. Puteti descarca sursa de pe pagina lor de pornire.
- 19. Milkchart
milkchart este o biblioteca de diagrame/grafice JavaScript care necesita MooTools. milkchart reda tabelele de date HTML intr-unul dintre cele cinci tipuri de diagrame ale sale: coloana, bara, linie, dispersie si placinta (cu extinderi viitoare planificate pentru graficele cu zone) folosind elementul Canvas din HTML5. milkchart este open source sub licenta Apache.
- 20. Timeplot
Timeplot va permite sa generati in mod dinamic grafice cu serii de timp. Trecerea cu mouse-ul peste punctele de date dezvaluie valoarea acestora. Timeplot a fost dezvoltat ca parte a proiectului SIMILE de la MIT.
Iata un tutorial pas cu pas despre cum sa utilizati Timeplot. Timeplot este open source si disponibila licenta BSD. Demo-ul Timeplot si link-urile de descarcare sunt pe aceasta pagina.
- Concluzie
Aducerea datelor la viata este o parte importanta a designului web. Javascript este excelent pentru orice site cu o multime de date, cum ar fi un consilier financiar sau site-ul unui agent imobiliar. Permite tabelelor de date sa iasa in evidenta si sa nu fie atat de fade, asa ca recomand cu caldura sa profitati de el.
