În ceea ce privește interoperabilitatea, Fleet vă va aduce cu siguranță cât mai aproape posibil de grafica Flash de jQuery. În timp ce rezultatul graficului este destul de elegant și arată grozav, puteți interacționa și cu punctele de date. Adică poți să treci cu mouse-ul peste un punct de date și să obții o imagine vizuală părere din valoarea acestui punct de pe grafic.

Versiunea portbagajului flotei acceptă diagrame circulare.

Abilitatea de a escalada flota.

În plus, aveți și opțiunea de a selecta o secțiune a graficului pentru a returna date pentru o anumită „zonă”. La fel de functie suplimentara pentru această „zonare” puteți, de asemenea, să selectați o zonă din grafic și să măriți pentru a vedea punctele de date puțin mai aproape. Foarte tare.

Sparkline

Restricții: plăcintă, linie, bară, combinație

Sparklines este mini instrumentul meu preferat de grafică. Foarte grozav pentru diagramele de stil din bara de instrumente (panou de gândire instrumente Google Analytics la următoarea conectare). Deoarece sunt atât de mici, pot fi incluse într-un șir (ca în exemplul de mai sus). O altă idee bună care poate fi folosită în toate pluginurile grafice este capacitățile de auto-actualizare. Demo-ul lor Mouse-Speed ​​​​vă arată puterea graficelor live la cel mai bun mod.

Diagrama de interogare 0.21

Constrângeri: zonă, linie, bară și combinații ale acestora

Graficul jQuery 0.21 nu este cel mai bun frumos plugin pentru trasarea diagramelor trebuie specificat acolo. Funcționalitatea este destul de simplă atunci când vine vorba de diagramele pe care le poate gestiona, totuși poate fi flexibil dacă îi poți dedica ceva timp și efort.

Adăugarea de valori la o diagramă este relativ simplă:

ChartAdd(( "eticheta" : "Leads", "type" : "Linie", "culoare": "#008800", "valori": ["100","124","222","44"," 123","23","99"] ));

jQchart

Restricții: bară, linie

jQchart este ciudat, au încorporat tranzistori de animație și funcții de glisare și plasare pentru a grafic, cu toate acestea, este un pic cam greoi - și aparent inutil. Generează diagrame frumoase dacă vă configurați corect CSS, dar există și mai bine.

TufteGraph

Constrângeri: bară și bară stivuită

Tuftegraph se comercializează ca „grafice cu bare frumoase pe care le vei arăta mamei tale”. Se apropie, Flota este mai drăguță, dar Tufte se face foarte ușor. Deși aici se termină restricțiile - există mai multe opțiuni din care puteți alege, astfel încât să obțineți ceea ce ați specificat. Uită-te la cardul de câștig rapid.

• Traducere

Aproape imposibil de imaginat panoul informativ fără diagrame sau grafice. Ele afișează rapid și eficient date statistice complexe. În plus, o diagramă bună îmbunătățește și designul general al site-ului dvs.

În acest articol, vă voi arăta unele dintre cele mai bune biblioteci JavaScript pentru construirea de diagrame/diagrame (și tabele pivot). Aceste biblioteci vă vor ajuta să creați diagrame frumoase și personalizabile pentru proiectele dvs. viitoare.

Deși majoritatea bibliotecilor sunt gratuite și open source, unele dintre ele au versiuni plătite cu funcționalități suplimentare.

D3.js - Documente orientate către date

Spre deosebire de multe alte biblioteci JavaScript, D3.js nu vine cu diagrame prefabricate imediat din cutie. Cu toate acestea, puteți arunca o privire la lista de grafice create cu D3.js pentru a vă face o idee generală.

D3.js nu funcționează corect cu browsere mai vechi precum IE8. Dar puteți utiliza oricând plugin-uri precum pluginul aight pentru compatibilitate între browsere.

D3.js a fost utilizat pe scară largă pe site-uri web precum NYTimes, Uber și Weather.com.

Google Charts

Google Charts are, de asemenea, multe setări de configurare care vă ajută să schimbați aspect Arte grafice. Graficele sunt generate folosind HTML5/SVG pentru a asigura compatibilitatea între browsere și portabilitatea pe mai multe platforme pe iPhone, iPad și Android. De asemenea, conține VML pentru a suporta versiuni mai vechi de IE.

HighchartsJS

Una dintre cele mai mari beneficii Aplicații HighchartsJS - compatibilitate cu browsere mai vechi, cum ar fi Internet Explorer 6. Browsere standard utilizați SVG pentru a reda grafice. În IE vechi, grafica este construită prin VML.

Deși HighchartsJS este gratuit pentru uz personal, trebuie să achiziționați o licență pentru utilizare comercială.

Fusioncharts

Spre deosebire de multe biblioteci, Fusioncharts oferă capacitatea de a analiza atât datele JSON, cât și XML. De asemenea, puteți exporta aceste diagrame în 3 diferite formate: PNG, JPG și PDF.

Fusioncharts este foarte compatibil cu browserele mai vechi, cum ar fi IE6. Și din acest motiv, a devenit una dintre bibliotecile cele mai preferate în multe organizații comerciale.

Puteți utiliza versiunea cu filigran a Fusioncharts gratuit atât în ​​proiecte personale, cât și în cele comerciale. Cu toate acestea, trebuie să achiziționați o licență pentru a scăpa de filigran.

flota

Flot acceptă diagrame cu bare, diagrame cu dispersie, diagrame cu bare, diagrame cu coloane și orice combinație a acestor tipuri de diagrame. De asemenea, compatibil cu browsere mai vechi, cum ar fi IE 6 și Firefox 2.

Flot este complet gratuit, suportul comercial este disponibil la cererea specială a dezvoltatorului. Iată o listă de exemple de diagrame create cu Flot.

amCharts

AmMaps este preferatul meu dintre cele trei de mai sus. Oferă funcții precum hărți termice, desen în linie, adăugare de text pe hartă, încărcare pictograme sau fotografii partea de sus harta dvs., mărirea, etc.
amCharts folosește SVG pentru a reda diagrame care funcționează numai în browserele moderne. Este posibil ca graficele să nu se afișeze corect în IE sub versiunea 9.

EJS Chart este oferit gratuit și versiuni plătite. Versiune gratuită are o limitare care nu vă permite să utilizați mai mult de 1 diagramă pe pagină și mai mult de două secvențe (numerice) pe diagramă. Consultați detaliile prețurilor.

uvCharts

UvCharts este construit pe biblioteca D3.js. Acest proiect promite să elimine toate nuanțele complexe ale codificării D3.js și să ofere o implementare ușoară a graficelor. vedere standard. uvCharts este generat folosind SVG, HTML și CSS.

Concluzie

Sper că v-a plăcut acest articol. Să aveţi o zi bună.

Etichete: Adăugați etichete

• Traducere

Este aproape imposibil să ne imaginăm un tablou de bord fără diagrame și grafice. Ele afișează rapid și eficient date statistice complexe. În plus, o diagramă bună îmbunătățește și designul general al site-ului dvs.

În acest articol, vă voi arăta unele dintre cele mai bune biblioteci JavaScript pentru construirea de diagrame/diagrame (și tabele pivot). Aceste biblioteci vă vor ajuta să creați diagrame frumoase și personalizabile pentru proiectele dvs. viitoare.

Deși majoritatea bibliotecilor sunt gratuite și open source, unele dintre ele au versiuni plătite cu funcționalități suplimentare.

D3.js - Documente orientate către date

Spre deosebire de multe alte biblioteci JavaScript, D3.js nu vine cu diagrame prefabricate imediat din cutie. Cu toate acestea, puteți arunca o privire la lista de grafice create cu D3.js pentru a vă face o idee generală.

D3.js nu funcționează corect cu browsere mai vechi precum IE8. Dar puteți utiliza oricând plugin-uri precum pluginul aight pentru compatibilitate între browsere.

D3.js a fost utilizat pe scară largă pe site-uri web precum NYTimes, Uber și Weather.com.

Google Charts

Google Charts are, de asemenea, o mulțime de setări de configurare care vă ajută să schimbați aspectul diagramei. Graficele sunt generate folosind HTML5/SVG pentru a asigura compatibilitatea între browsere și portabilitatea pe mai multe platforme pe iPhone, iPad și Android. De asemenea, conține VML pentru a suporta versiuni mai vechi de IE.

HighchartsJS

Unul dintre cele mai mari beneficii ale utilizării HighchartsJS este compatibilitatea cu browsere mai vechi, cum ar fi Internet Explorer 6. Browserele standard folosesc SVG pentru a reda diagramele. În IE vechi, grafica este construită prin VML.

Deși HighchartsJS este gratuit pentru uz personal, trebuie să achiziționați o licență pentru uz comercial.

Fusioncharts

Spre deosebire de multe biblioteci, Fusioncharts oferă capacitatea de a analiza atât datele JSON, cât și XML. De asemenea, puteți exporta aceste grafice în 3 formate diferite: PNG, JPG și PDF.

Fusioncharts este foarte compatibil cu browserele mai vechi, cum ar fi IE6. Și din acest motiv, a devenit una dintre bibliotecile cele mai preferate în multe organizații comerciale.

Puteți utiliza versiunea cu filigran a Fusioncharts gratuit atât în ​​proiecte personale, cât și în cele comerciale. Cu toate acestea, trebuie să achiziționați o licență pentru a scăpa de filigran.

flota

Flot acceptă diagrame cu bare, diagrame cu dispersie, diagrame cu bare, diagrame cu coloane și orice combinație a acestor tipuri de diagrame. De asemenea, compatibil cu browsere mai vechi, cum ar fi IE 6 și Firefox 2.

Flot este complet gratuit, suportul comercial este disponibil la cererea specială a dezvoltatorului. Iată o listă de exemple de diagrame create cu Flot.

amCharts

AmMaps este preferatul meu dintre cele trei de mai sus. Oferă funcții precum hărți termice, trasarea liniilor, adăugarea de text pe hartă, încărcarea pictogramelor sau fotografiilor în partea de sus a hărții, mărirea și multe altele.
amCharts folosește SVG pentru a reda diagrame care funcționează numai în browserele moderne. Este posibil ca graficele să nu se afișeze corect în IE sub versiunea 9.

EJS Chart este disponibil în versiuni gratuite și plătite. Versiunea gratuită are o limitare care nu vă permite să utilizați mai mult de 1 diagramă pe pagină și mai mult de două secvențe (numerice) pe diagramă. Consultați detaliile prețurilor.

uvCharts

UvCharts este construit pe biblioteca D3.js. Acest proiect promite să elimine toate nuanțele complexe ale codificării D3.js și să ofere o implementare ușoară a graficelor de vizualizare standard. uvCharts este generat folosind SVG, HTML și CSS.

Concluzie

Sper că v-a plăcut acest articol. Să aveţi o zi bună.

Dacă ai lucrat cu orice fel de date, știi cât de dureroase pot fi numerele. Nu este ușor să treci prin toate aceste numere și să înțelegi ce înseamnă ele. Aici vizualizarea vine în ajutor. Vizualizarea clarifică datele și îi ajută pe factorii de decizie să extragă informații utile din acestea.

„Dataviz” este o abreviere pentru „vizualizarea datelor”, a cărei sarcină principală este de a comunica în mod clar și eficient informații utilizatorilor folosind grafice statistice, diagrame, grafice informative și tabele.

În calitate de dezvoltatori, trebuie să folosim instrumentele potrivite pentru a crea diagrame expresive din date, oferind cantitatea potrivită de detalii fără a diminua imaginea de ansamblu.

Există multe plugin-uri jQuery disponibile care vă pot ajuta să creați un dataviz interactiv pentru pagina dvs. web. Dar care sunt cu adevărat utile? În acest articol, mi-am numit preferatele și le-am evidențiat relevanța în anumite situații. În acest fel, nu veți pierde timp și efort căutând și veți avea o imagine de ansamblu asupra alegerilor dvs. actuale.

1. FusionCharts

Pe lângă JavaScript Charts, FusionCharts oferă, de asemenea, un plugin jQuery care include toate avantajele FusionCharts - design inteligent, animație și experiență interactivă bogată. Graficele rulează fără probleme pe toate tipurile de dispozitive, inclusiv PC, Mac, dispozitive Android precum și iPad-uri și iPhone-uri. De asemenea, este compatibil cu browserele de până la IE6.

Acest plugin jQuery are câteva caracteristici foarte puternice. Pot fi prezentate grafice date JSON, date XML sau Tabelele HTML. Multe dintre evenimentele obișnuite care se întâmplă într-un grafic sunt reprezentate (iată lista completă), veți avea o șansă mai mare ca ascultătorii dvs. să efectueze anumite acțiuni.

Iată un ghid de utilizare la îndemână pentru a vă ajuta să începeți cu pluginul și cu fragmentele de cod reale pe care le puteți utiliza. Exemple de plugin și cod sunt, de asemenea, disponibile pe Github.

În daneză, flot (rimează cu „complot”) înseamnă elegant, atrăgător, impresionant și exact asta își propune să facă biblioteca Flot. Aceștia se concentrează pe crearea de diagrame și grafice ușor de utilizat, atractive și interactive. Caracteristicile interactive includ pornirea și dezactivarea ciclurilor, panoarea și mărirea, interacțiunea cu datele și schimbare automată mărimea. Alte caracteristici includ suport pentru mai multe axe, diagrame stivuite și redarea textului cu Canvas în loc de HTML. Multe alte funcții sunt disponibile ca plugin-uri.

Există o serie de videoclipuri care arată cum să utilizați Flot și multe exemple ilustrative la care vă puteți referi, de asemenea.

Licență: sursă deschisă. Gratuit pentru orice aplicație.

3.Highcharts

Highcharts este un alt popular Biblioteca JavaScript pentru construirea de diagrame. A fost lansat în 2009 și încă câștigă avânt. Ea oferă scheme generale, hărți și diagrame bursiere.

Puteți descărca adaptorul jQuery de la pagina principala descărcări împreună cu biblioteca Highcharts în sine. Acest lucru vă permite să învățați toate funcțiile puternice fără a fi nevoie să vă ocupați de JavaScript vanilla.

La fel ca FusionCharts, acceptă și toate browserele (inclusiv IE6), dispozitivele și platformele. Comunitatea susține foarte mult Highcharts și puteți găsi toate pluginurile dezvoltate de comunitate pe această pagină. O altă caracteristică grozavă a Highcharts este secțiunea demo, care vă permite să începeți foarte repede.

Licență: gratuită în scopuri necomerciale, plătită în scopuri comerciale.

4. Morris.js

Morris.js este o bibliotecă puternică, cu o interfață curată. Se bazează pe jQuery și biblioteca Raphaël JavaScript. Scopul principal este de a oferi diagrame frumoase care sunt ușor de utilizat. Tipurile de diagrame implicite includ linie, bară, zonă și gogoașă. Există mai multe exemple în bibliotecă pe care le puteți arunca o privire cu un cod care vă va arăta cum să începeți și să creați diagrame atractive în câteva minute.

Licență: Licență BSD simplificată.

5. CanvasJS jQuery

CanvasJS jQuery este un plugin de diagrame jQuery care vine cu CanvasJS. Când aplicați acest plugin jQuery, puteți utiliza toate funcții standard CanvasJS, împreună cu un set de caracteristici avansate care include actualizări dinamice, panorame și zoom, evenimente și export ca imagini. Graficele sunt suficient de bune pentru seturi mari de date și pachet de bază include 24 tipuri variate grafice și toate sunt receptive.

Aici sunt câteva exemple bune cu cod sursă care prezintă caracteristici de grafică și integrare jQuery UI.

Licență: gratuită în scopuri necomerciale, plătită în scopuri comerciale.

6. Cytoscape.js

Cytoscape.js nu arată ca o bibliotecă de plotare tipică, dar este suficient de impresionant pentru a merita un loc pe această listă. Spre deosebire de celelalte plugin-uri pe care le-am discutat până acum, Cytoscape este într-adevăr o bibliotecă de trasare jQuery (adică ajută la randarea graficelor sau a rețelelor). Este optimizat atunci când vine vorba de conversia datelor brute de rețea în grafice și poate gestiona și cantități mari de date. Compatibil cu toate browsere moderne, CommonJS/NodeJS, jQuery și Meteor/Atmosphere. Ea sustine si ea evenimente de atingereși gesturi standard. Pentru mai mult lista completa funcții, vă rugăm să consultați pagina Cytoscape.js.

Documentația Cytoscape.js include exemple de cod reale, chiar și pentru cazuri interactive și Set complet teste unitare.

Licență: sursă deschisă. Gratuit pentru toți utilizatorii. (LGPL3+)

7. Peity

Uneori ai nevoie doar de coloane mici cu conținutul tău, iar Peity este soluția perfectă pentru astfel de situații. Vă permite să convertiți cu ușurință cantități mici de date în diagrame cu linii, bare, gogoși cu o singură linie de cod. Sunt în formă svg și, prin urmare, sunt compatibile cu orice browser care acceptă elementul svg, inclusiv inclusiv Chrome, Opera, Firefox, IE9+ și Safari. De asemenea, puteți personaliza elemente vizuale diagrame și setați culori dinamice. Graficele pot fi actualizate pentru a reflecta modificările date. Evenimentele sunt, de asemenea, suportate. Sunt atașate multe exemple cu cod real pe pagina Github.

8. Diagramă circulară ușoară

Vorbind de simplitate și eficiență, trebuie să menționez Easy Pie Chart. Acesta este un plugin jQuery care face un singur lucru - creează diagrame circulare simple pentru valori individuale. Folosește elementul canvas pentru a realiza aceste diagrame. Graficele sunt ușor de configurat cu doar câteva linii de cod. Ele sunt, de asemenea, receptive și se scalează pentru a se potrivi cu rezoluția ecranului pentru a oferi o grafică clară, chiar și pe ecranele retină.

Pluginul este compatibil cu toate browserele moderne care acceptă elementul canvas. Pe IE 8 și mai vechi, puteți crea diagrame folosind excanvas. Puteți vedea câteva demonstrații interesante pe Github.

Licență: open source sub licența MIT.

9.jqPlot

jqPlot este un plugin jQuery care vă permite să încorporați diagrame pur pe partea clientului în paginile web. jqPlot se mândrește cu o „conectabilitate” puternică, în sensul că toate calculele și desenele - linii, axe, umbre, grile și așa mai departe - sunt făcute cu dispozitive de redare conectabile. Te poți extinde funcţionalitate pentru gestionarea evenimentelor utilizatorului, adăugarea de noi tipuri de diagrame și alte caracteristici suplimentare.

Tutoriale detaliate despre utilizarea jqPlot sunt disponibile aici. Sunt disponibile, de asemenea, exemple de grafice și unele teste unitare.

Licență: proiect open source. Licență duală - MIT și GPL versiunea 2.

10.jQuery Sparklines

1436351687jQuery-sparklines

jQuery Sparklines (similar cu Peity) vă permite să creați mici diagrame inline cu date care vin direct în HTML sau prin JavaScript inline. Crearea fiecărui exemplu din imaginea de mai sus necesită o singură linie de cod. Nici măcar nu trebuie să scrieți singur codul. Există un generator de coduri (sub titlul „Încercați”) unde puteți introduce date și puteți seta opțiuni și aveți codul generat pentru dvs. Rețineți că nu puteți adăuga text sau etichete la liniile sparkline. Sunt concepute pentru a afișa potriviri cu textul dvs. Dacă aveți nevoie de adnotări sau alte funcții, este mai bine să utilizați unul dintre pluginurile pe care le-am acoperit mai sus.

În cazul în care doriți să utilizați acest plugin, există o documentație detaliată despre opțiuni, sintaxă și utilizare.

Licență: sursă deschisă. Gratuit pentru toate utilizările.

11.jQuery.Gantt

Până acum, am vorbit despre pluginuri care creează grafice și diagrame familiare, pluginuri care vă ajută cu grafice de rețea și unele pentru minigrafice și diagrame încorporate. Dar dacă doriți un tablou de bord cu funcții de management de proiect, aveți nevoie de diagrame Gantt. Pluginul jQuery.Gantt vă permite să redați diagrame Gantt folosind Ajax pentru a prelua date format json. Caracteristicile includ pan, zoom, căutare, sarcini multiple, culori diferite pentru fiecare sarcină, etichetare de vacanță și multe altele. Pentru a afla mai multe despre acest plugin, puteți citi documentația detaliată a acestuia, care explică opțiunile sale și cum să îl utilizați.

Dacă vă plac diagramele Gantt, atunci vă sugerez să citiți articolul „Crearea propriei diagrame Gantt cu Webix” de Sergey Laptick despre cum să creați o aplicație de diagrame Gantt utilizând cadrul Webix combinat cu o diagramă Gantt JavaScript open source numită dhtmlxGantt. Merită citit.

Licență: proiect open source. Licență duală - MIT și GPL.

concluzii

Lista bibliotecilor mele preferate de grafice jQuery - de macar, cele pe care le-am folosit - s-au terminat. Acestea acoperă aproape fiecare tip de diagramă, funcționalitate și personalizare de care ai putea avea nevoie.

Conversii mari!

Dacă cumpărătorii sau clienții dvs. trebuie să transmită un fel de raportare, precum și câteva comparații, cele mai comune grafice vă vor ajuta foarte mult. În general, ele sunt create pentru asta. Pentru a vă ușura căutarea, ca întotdeauna, vă prezint o selecție de 9 biblioteci de diferite diagrame Javascript. Aceste grafice sunt destul de funcționale și au, de asemenea, o animație frumoasă, care va fi plăcută oricărui utilizator.

2.Charist.JS

Bibliotecă mare de diagrame cu suport design adaptiv. SVG este, de asemenea, folosit în diagrame.

3.c3js

O bibliotecă grozavă cu o mulțime de exemple. Practic, aceste grafice sunt simple atât ca aspect, cât și ca instalare, dar își îndeplinesc complet sarcina principală.

4. Flota

Acest plugin jQuery pentru a crea diagrame interactive pe site. ÎN acest caz aici puteți scala, adăuga și elimina diverse elemente, puteți face panouri și multe altele. Acest plugin vine cu o mulțime de tipuri de diagrame deja încorporate.

5.Echart

Aceasta este o bibliotecă imensă și extinsă de grafice și diagrame create de chinezi. Ea susține o cantitate mare informație.

6. Peity

O bibliotecă simplă cu care puteți adăuga foarte ușor și rapid un grafic obișnuit sau un fel de diagramă la o pagină web.

7. DC JS

O altă bibliotecă grozavă care face ceea ce trebuie să facă. Prezent frumoasa animatie, funcționalitate și ușurință de instalare.

8. Google Chart

Puteți crea diagrame interactive cu API Google. Există, de asemenea, galerii cu diagrame deja create pentru a vedea de ce este capabilă această bibliotecă.

9.NVD3

O bibliotecă de grafice și diagrame ușor de instalat și configurat. Tocmai ridicat și instalat.