În primul rând, o scurtă istorie:

Deoarece colectarea și utilizarea datelor continuă să crească exponențial, necesitatea de a vizualiza aceste date devine din ce în ce mai importantă. Dezvoltatorii caută să consolideze milioane de înregistrări ale bazelor de date în diagrame și tablouri de bord frumoase pe care oamenii le pot interpreta rapid și intuitiv.

Tehnologia de vizualizare a datelor a continuat să se îmbunătățească în ultimul deceniu și multe biblioteci de diagrame avansate sunt acum disponibile pentru consumatori. La începutul anilor 2000, generarea graficelor era dominată de graficele bitmap ale imaginii de pe server. Plugin-uri precum Flash și Silverlight au oferit o experiență de graficare mai interactivă, dar cu o taxă mare asupra vitezei de descărcare, a duratei de viață a bateriei și a resurselor sistemului.

Odată cu explozia utilizării dispozitivelor mobile și tabletelor, pluginurile nu mai erau acceptate pe platformele majore, iar dezvoltatorii au trebuit să treacă la deschiderea tehnologiilor clientului care ar putea rula peste tot. În același timp, apariția ecranelor cu rezoluție foarte înaltă și zoom-ul mai obișnuit prin gesturi tactile au adus în prim plan grafice vectoriale independente de rezoluție.

Introduceți era actuală a vizualizării datelor, dominată de JavaScript și SVG (Scalable Vector Graphics). Diagramele rulează acum pe toate browserele, fără pluginuri speciale, acceptă interactivitatea și animațiile și arată clar chiar și pe dispozitivele cu cea mai înaltă rezoluție. Analizând peste 50 de biblioteci de vizualizare, aceste 9 produse s-au remarcat:

D3.js

Acestea sunt cele mai bune biblioteci de diagrame JavaScript pentru

D3.js este o bibliotecă JavaScript grafică foarte extinsă și puternică. Vă permite să legați date arbitrare la un model de obiect document (DOM) și apoi să aplicați transformări bazate pe date documentului.

D3 depășește cu mult dincolo de bibliotecile grafice tipice, incluzând multe alte module tehnice mai mici, cum ar fi axe, culori, ierarhii, contururi, relaxare, poligoane și multe altele. Toate acestea fac o curbă de învățare abruptă.

Încercarea de a crea o diagramă simplă poate fi complicată. Toate elementele, inclusiv axele și alte elemente ale diagramei, trebuie definite în mod explicit. Multe mostre arată modul în care CSS poate fi folosit pentru a stiliza elementele grafice. Nicio funcție bazată pe grafică nu se aplică automat. Dacă doriți să intrați în buruieni și să folosiți creativitatea pentru a controla pe deplin fiecare element, aceasta este cea mai bună alegere. Lucrând împotriva ceasului pentru a îndeplini cerințele proiectului de vizualizare a datelor, este posibil să nu fie cea mai bună alegere începând de la zero.

D3.js poate fi un element de bază pentru o bibliotecă de diagrame. Dezvoltatorii au folosit D3 pentru a facilita utilizarea soluțiilor de diagrame care îl consumă, cum ar fi NVD3.

D3.js este open source și gratuit de utilizat.

JSCharting

1611713709 30 Acestea sunt cele mai bune biblioteci de diagrame JavaScript pentru

Biblioteca de diagrame JSCharting acceptă un număr mare de tipuri de diagrame, inclusiv hărți, gantt, stoc și altele care necesită adesea biblioteci separate pentru a fi utilizate. Include hărți încorporate ale tuturor țărilor lumii și o bibliotecă de pictograme SVG. O suită de micro diagrame independente poate fi redată în orice etichetă a diagramei sau în orice element div de pe o pagină. Comenzile UI (UiItems) sunt, de asemenea, incluse, permițând diagrame interactive mai bogate. Este ușor să controlați datele sau variabilele de vizualizare în timp real, iar diagramele pot fi exportate în formatele SVG, PNG, PDF și JPG.

Galeria este împărțită în tip de diagramă și mostre de caracteristici. Stilul graficului este lustruit și oferă câteva diagrame cu aspect curat. Imaginile de ansamblu oferă o experiență de graficare curată și profesională.

Eșantioanele incluse utilizează un obiect de configurare pentru a personaliza diagrame. Setările pentru crearea și controlul tipurilor de diagrame sunt foarte simple de utilizat. Sunt necesare puține setări de proprietăți pentru a specifica tipuri de diagrame mai complexe, iar JSCharting are valori implicite puternice și dinamice, ceea ce înseamnă că încearcă să aleagă automat cele mai bune setări pentru scenarii.

Documentația include multe tutoriale și descrieri detaliate ale proprietăților API. Multe proprietăți includ exemple de utilizare și exemple de legături.

JSCharting este gratuit pentru uz non-comercial și personal și oferă, de asemenea, opțiuni de licență comercială care includ toate tipurile de grafice și produsele pentru o singură taxă.

Highcharts

1611713709 864 Acestea sunt cele mai bune biblioteci de diagrame JavaScript pentru

Highcharts este o populară bibliotecă de diagrame JavaScript folosită de multe dintre cele mai mari companii din lume. Diagramele sunt generate folosind SVG și alternativă la VML pentru compatibilitate inversă până la IE6 / IE8. Diagramele demonstrative demonstrează un set de caracteristici destul de bogat, dar nu uimesc vizual. Documentația generală include tutoriale pentru multe subiecte relevante, iar documentația API este completă.

Diagrama folosește opțiuni de configurare pentru a crea diagrame, iar API-ul este ușor de utilizat.

Highcharts este gratuit pentru uz necomercial și personal. Licențierea comercială este necesară pentru alte utilizări, iar stocurile, hărțile și diagramele gantt sunt licențiate separat.

amCharts

1611713709 774 Acestea sunt cele mai bune biblioteci de diagrame JavaScript pentru

amCharts și-a lansat recent versiunea 4, care adaugă un puternic motor de animație SVG care permite crearea de scene de tip film.

Diagramele demo arată foarte frumos. Majoritatea demonstrațiilor oferă un număr de palete și un glisor UI pentru a ajusta variabilele grafice în timp real. Documentația include multe tutoriale și descrieri complete de proprietăți API.

Crearea unui grafic se simte ușor diferită de abordarea bazată pe configurație și, în schimb, folosește un API mai declarativ. Necesită ceva mai mult cod pentru a configura diagrame, dar oferă o experiență mai bună de completare a codului.

amCharts oferă o licență gratuită cu diagrame de marcă și licențe plătite pentru alte utilizări.

Google Charts

1611713709 106 Acestea sunt cele mai bune biblioteci de diagrame JavaScript pentru

Diagramele Google sunt puternice și ușor de utilizat.

Eșantioanele de diagrame arată curate și sunt ușoare pentru ochi. Galeria și galeria extinsă afișează multe tipuri de diagrame, dar apăsând meniul hamburgerului se afișează mai multe tipuri (cum ar fi calendarul) care nu sunt afișate în aceste liste de galerii.

Fiecare tip de diagramă are un tutorial dedicat cu exemple live. Tutorialele includ cod pentru caracteristicile aferente și listări API. Aceasta este o experiență plăcută pentru a începe cu o nouă bibliotecă de diagrame.

Diagramele sunt personalizate utilizând obiectul opțiuni de configurare. Seturile de date sunt populate utilizând o clasă DataTable care poate fi consumată de toate diagramele. Fiecare tip de diagramă are opțiuni unice enumerate în tutorialele specifice tipului. Denumirea proprietăților este standardizată și multe opțiuni funcționează în toate tipurile.

Hărțile Google sunt gratuite, dar există o avertizare. Este un serviciu web și nu poate fi găzduit local. În trecut, Google a retras API-ul, deci, dacă utilizarea dvs. este critică pentru misiune, vă recomandăm să alegeți o altă opțiune.

ZingChart

1611713709 311 Acestea sunt cele mai bune biblioteci de diagrame JavaScript pentru

ZingChart oferă multe tipuri de diagrame și se integrează cu cadrele unghiulare, de reacție și alte. Are un set puternic de caracteristici, cu multe opțiuni de personalizare.

Diagramele demonstrative arată o serie de teme de stil, dintre care unele arată mai bine decât altele, dar există opțiuni pentru a le stiliza după cum este necesar. Demonstrațiile nu demonstrează toate tipurile de diagrame disponibile.

Documentația include tutoriale pentru toate tipurile disponibile, un număr bun de caracteristici și listarea API completă.

ZingChart folosește opțiuni de configurare pentru a personaliza diagrame. Exemplele includ multe setări ale proprietății, cum ar fi stilul fontului. Acestea pot împiedica înțelegerea setărilor necesare pentru o anumită diagramă.

ZingChart poate fi utilizat gratuit cu branding. Licențierea cu plată este disponibilă pentru utilizarea fără marcă.

FusionCharts

1611713709 65 Acestea sunt cele mai bune biblioteci de diagrame JavaScript pentru

FusionCharts există de mulți ani, începând ca un plugin pentru diagrame bazat pe Flash. Este o bibliotecă robustă de vizualizare a graficelor. Acesta acceptă multe formate de date, inclusiv XML, JSON și JavaScript, funcționează în browsere moderne și este compatibil cu versiunile IE6. Sunt acceptate, de asemenea, multe cadre JavaScript și limbaje de programare de pe server.

Galeria de diagrame include un număr mare de exemple și au un aspect vizual curat.

Documentația include descrieri API bune și exemple de fiecare tip de diagramă. Proprietățile de configurare sunt grupate după sarcini și caracteristici ale graficului.

Diagramele sunt create folosind opțiuni bazate pe configurație și este relativ ușor de utilizat. Lista de proprietăți poate fi lungă atunci când săpați mai adânc în API. Toate proprietățile de configurare sunt superficiale, cum ar fi {chartLeftMargin, showAlternateHGridColor}. Pare o încercare de a îmbunătăți completarea codului.

FusionCharts este gratuit pentru uz personal cu branding grafic. Licențierea cu plată este disponibilă pentru utilizare comercială și fără marcă.

KOOLCHART

1611713709 639 Acestea sunt cele mai bune biblioteci de diagrame JavaScript pentru

KoolChart este o bibliotecă de diagrame JavaScript bazată pe pânză HTML 5. Este disponibil și un produs de cartografiere și grilă.

Noua lor versiune v5 include un set de caracteristici mai interactiv și un stil actualizat. Vizualele sunt curate și moderne. Utilizarea pânzei oferă performanțe mai bune în detrimentul bazării pe raster.

Eșantioanele utilizează un XML bazat pe șiruri pentru a aplica opțiuni de diagramă care pare mai puțin practice decât alte abordări. Aceste opțiuni arată ca HTML5, dar sunt setate printr-un șir JavaScript.

API-ul este bine documentat cu exemple de diagrame pentru fiecare proprietate. Este disponibil și un manual PDF de 173 pagini.

O perioadă de probă de două luni este disponibilă pentru evaluare. Licențierea este necesară după expirarea perioadei de încercare.

Chart.js

1611713709 138 Acestea sunt cele mai bune biblioteci de diagrame JavaScript pentru

Chart.js este o bibliotecă JavaScript open source care acceptă 8 tipuri de diagrame. Este o mică bibliotecă js la doar 60kb. Tipurile includ diagrame de linii, diagrame cu bare, diagrame de zonă, radar, diagrame pie, bubble, grafice scatter și mixte. O serie de timp este, de asemenea, acceptată. Folosește element de pânză pentru redare și este receptiv la redimensionarea ferestrei pentru a menține granularitatea scării. Este compatibil cu IE9. Polifillurile sunt disponibile și pentru a lucra cu IE7.

Exemplele vizuale sunt destul de moderne și includ animații inițiale la desenarea pentru prima dată. Se animă ușor atunci când adăugați serii sau puncte de date în timp real. Opțiunile grafice pot fi modificate după și apelarea unei funcții update () redesenează graficul.

Exemplul de cod sursă nu este afișat în galeria site-ului web, dar este disponibil în repo GitHub. Opțiunile de configurare sunt utilizate pentru a crea și modifica diagrame. Opțiunile API sunt curate și intuitive.

Documentația este detaliată și include tutoriale cu API-ul proprietății și fragmente de cod.

Chart.js este o bibliotecă open source și gratuită pentru utilizare personală și comercială, care este un plus. Numărul limitat de tipuri poate fi o problemă pentru cerințele mai avansate ale tabloului de bord.

Concluzie

Ecosistemul bibliotecilor de diagramă JavaScript a evoluat considerabil în ultimul deceniu. Astăzi, există un număr mare de produse de graficare care îndeplinesc cerințe foarte diverse, servind o gamă largă de proiecte, deși sute de tipuri de grafică. Majoritatea bibliotecilor oferă o versiune de încercare gratuită sau o versiune de marcă care vă permite să evaluați eficacitatea graficului cu propriile date, încărcarea și complexitatea proiectului.

Este ușor pentru majoritatea bibliotecilor de diagrame să gestioneze seturi de date simple și vizualizări statice. Cu toate acestea, este posibil ca diagramele să nu gestioneze întotdeauna lucrurile fără probleme atunci când sunt vizualizate date dinamice din lumea reală. Poate fi necesară mai multă muncă pentru ajustarea și aranjarea elementelor, astfel încât diagramele să pară corecte, iar această ajustare manuală să se poată rupe pe măsură ce sunt vizualizate noi date dinamice.

Pentru a selecta cea mai bună soluție grafică JS pentru nevoile dvs. unice, vă recomand să testați propriile date pe câteva biblioteci enumerate mai sus pentru a vă asigura o potrivire ideală pentru proiectele dvs. actuale și viitoare.