Biblioteci de diagrame JavaScript: 13 opțiuni populare

#1 – Chart.js

Chart.js este o bibliotecă de grafice practică care folosește <canvas> HTML5 pentru a reda diagramele.

Biblioteca este cu ușurință cea mai bună alegere pentru proiecte simple, din motive precum faptul că este receptivă în mod implicit și puteți aplica și efecte de animație bazate pe comportamentul utilizatorului.

Iată cele 8 tipuri de diagrame pe care le puteți crea cu Chart.js:

• Graficul zonelor
• Diagramă cu bare
• Diagrama cu bule
• Donut și diagrame circulare
• Diagramă cu linii
• Tipuri de diagrame mixte
• Diagrama zonei polare
• Diagrama radar

În ceea ce privește ușurința de utilizare, sintaxa este simplă și, chiar dacă nu ați mai lucrat niciodată cu JavaScript, crearea unei noi diagrame este simplă.

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

Dacă doriți să extindeți diagramele cu funcții dinamice și pooling de date, biblioteca are un sistem de pluginuri pe care îl puteți utiliza pentru a adăuga funcționalități noi.

Exemplu Chart.js

Vedeți Pen Proof of concept: Chart.js cu Background Gradient de Sven (@hofmannsven) pe CodePen.

Resurse suplimentare Chart.js

• Chart.js + Next.js = tablouri de bord frumoase, bazate pe date
• Noțiuni introductive cu Chart.js; Învățare bazată pe sarcini

#2 – D3.js

Permiteți-mi să încep prin a spune că D3 este mai degrabă un instrument de vizualizare a datelor decât o bibliotecă tradițională de diagrame.

D3 vă permite să specificați un set de date și să-l legați la DOM, apoi puteți utiliza funcțiile bibliotecii pentru a transforma acele date într-o reprezentare vizuală unică. În ceea ce privește prezentarea vizuală, D3 profită de tabelele HTML, SVG și <canvas> pentru redarea datelor pe o pagină.

Dacă ați văzut vreodată unul dintre acele globuri care se rotesc bazate pe geometrie cu mai multe puncte de date interactive pe ele, sunt șanse ca prezentarea să fi fost creată cu D3. Cu toate acestea, funcționează bine și pentru utilizări practice, cum ar fi diagrama de bază pe care o puteți vedea în demonstrația de mai jos. În cele din urmă, veți dori să vă referiți la secțiunea oficială Tutoriale pentru D3 pentru a explora capacitățile sale mai complicate.

D3.js Exemplu

Vedeți Graficul Pen D3 + ReactJS de Web Dev (@ronaldmarin) pe CodePen.

Resurse suplimentare D3.js

• Tutorial D3.js
• Crearea unei hărți termice pentru calendar D3.js

#3 – Apache ECharts

Unul dintre motivele pentru care Apache ECharts este atât de popular este că aveți acces la sute de exemple de diagrame prefabricate imediat din cutie. Puteți verifica acest lucru personal vizitând directorul Exemple. Această pagină acoperă diagrame și exemple în categorii precum linii, bare, diagrame circulare, dispersie, hărți termice, grafice și multe altele.

Și, fiecare exemplu are incluse exemple de cod JavaScript și TypeScript. Dar asta nu este tot, există câteva beneficii reale ale utilizării acestei biblioteci. Iată câteva dintre ele:

• Streaming de date. Doriți să creați diagrame interactive cu milioane de puncte de date? ECharts folosește WebSockets pentru a transmite date în flux, astfel încât acestea să poată fi încărcate asincron chiar și cu seturi de date extrem de mari.
• Compatibil cu dispozitivele mobile. Atunci când utilizatorii vizualizează un EChart pe dispozitivele lor mobile, diagrama în sine a fost optimizată pentru a oferi caracteristici interactive – zoom, panning și redare SVG pentru a asigura cea mai bună livrare.
• Date dinamice. Puteți alimenta ECharts cu mai multe puncte de date (separate), iar biblioteca va anima automat diagrama pentru a oferi utilizatorilor o experiență interactivă.
• Accesibilitate. Apache ECharts (v4.0 și versiuni ulterioare) este construit pentru a urma liniile directoare WAI-ARIA.

De asemenea, puteți afișa graficele pe site-ul dvs. web folosind un CDN extern.

Exemplu Apache ECharts

Vedeți Exemplul Pen Apache Echart de Vale (@vsigno) pe CodePen.

Apache ECharts Resurse suplimentare

• Construiți un instrument GitHub Insight mai bun într-o săptămână

#4 – Complot

Plotly este compania-mamă a Dash, o soluție low-code pentru implementarea aplicațiilor de date. Și își dezvoltă propria bibliotecă de grafice – Plotly – în incintă.

Cu Plotly, puteți crea cele mai simple vizualizări de diagrame, dar puterea reală a bibliotecii constă în capacitatea de a produce diagrame bazate pe statistici, reprezentări de date 3D și diagrame bazate pe date financiare.

Este disponibil atât ca modul Node.js, dar poate fi folosit și direct dintr-un CDN.

Exemplu de complot

Vedeți adnotarea Pen Add la evenimentul de clic după plotly (@plotly) pe CodePen.

#5 – Frappe

Biblioteca de diagrame Frappe este creată de cei care au creat Cadrul Frappe. Această bibliotecă este cât se poate de simplă. Și acea simplitate este un factor major care contribuie la popularitatea bibliotecii.

Biblioteca nu necesită dependențe externe și poate reda diagrame SVG pentru dispozitive mobile în doar câteva rânduri de cod. Iată un exemplu de cod pentru o diagramă de bază Axis:

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

Și acest mic fragment s-ar traduce într-o diagramă ca aceasta:

Există, de asemenea, suport pentru diagrame mixte (mai multe diagrame într-unul), adnotări, hărți termice și este disponibil un API dacă intenționați să actualizați datele în timp real sau să le exportați.

Exemplu Frappe

Vedeți Pen Frappe Hello World de Jang Rush (@weakish) pe CodePen.

#6 – ApexCharts

ApexCharts este o bibliotecă tradițională de diagrame. Principala diferență dintre ApexCharts și Frappe (de exemplu) este că ApexCharts oferă puțin mai multe demonstrații. Dar, de asemenea, oferă suport nativ pentru cadre populare, cum ar fi React, Vue și Angular. Acest lucru înseamnă, de asemenea, că toate diagramele demo au mostrele lor respective scrise în sintaxa cadrelor menționate.

În ceea ce privește caracteristicile, toate diagramele sunt generate în format SVG și sunt adaptate implicit pentru dispozitive mobile. De asemenea, puteți profita de funcții precum animații netede și adnotări și puteți personaliza paleta de teme ale diagramei alegând unul dintre cele 10 stiluri de eșantion.

Exemplu ApexCharts

Vedeți Pen Realtime Dashboard de la ApexCharts (@apexcharts) pe CodePen.

#7 – G2

Am vorbit recent despre Ant Design în mai multe rânduri, inclusiv în articolele mele despre bibliotecile de componente pentru React.js și Vue. Nu numai că Ant este extrem de populară pe GitHub, dar comunitățile le iubesc în toate regiunile lumii.

Și biblioteca de diagrame G2 (sau așa cum o numesc ei „Gramatică de vizualizare”) este implementarea de către Ant Design a unui sistem de diagrame folosind sistemul Ant Design. Recomand cu căldură să consultați pagina de pornire AntV, unde veți găsi o mulțime de alte biblioteci referitoare la vizualizarea datelor în timp real.

Cel mai des este folosit pentru a construi lucruri precum tablouri de bord de administrare, pentru a crea căi de date și pentru a face exemple interactive de vizualizare a datelor folosind motorul său de randare. Acest motor poate reda diagrame și vectori de date prin WebGL, Canvas și SVG. Și deoarece biblioteca este conectabilă, vă puteți îmbunătăți și mai mult prezentările grafice prin biblioteci mai robuste, cum ar fi D3.js (pe care am văzut-o mai devreme).

#8 – roughViz

Biblioteca roughViz de la Jared Wilber este o combinație de 3 biblioteci diferite: D3.js, Rough.js și handy – un procesor de schiță desenat manual. După cum puteți vedea din exemplul de captură de ecran de mai sus, aceasta nu este biblioteca dvs. tipică de diagrame. roughViz este construit în întregime cu scopul de a vă ajuta să creați diagrame desenate manual, în stil schiță, folosind JavaScript.

Acest tip de bibliotecă va aduce un plus excelent proiectelor personale, cu alte cuvinte – proiecte care necesită o scânteie mai creativă decât abordarea tradițională în stil profesional. Și sintaxa în sine este cât de simplă ar putea fi, foarte în concordanță cu Frappe și ApexCharts.

Puteți vedea asta pentru dvs. în demonstrația de mai jos.

roughViz Exemplu

Vedeți demonstrația Pen RoughViz de Danny Englishby (@DanEnglishby) pe CodePen.

#9 – Grafice ușoare

Dacă lucrați la un proiect legat de finanțe (sau criptomonede de altfel), este destul de clar că multe dintre bibliotecile de diagrame menționate anterior pur și simplu nu o vor tăia. Ca atare, aici este Lightweight Charts – o bibliotecă de diagrame creată special pentru afișarea diagramelor și graficelor bazate pe finanțe.

Această bibliotecă nu numai că este open-source și ușoară, dar include și toate caracteristicile necesare care ar fi necesare pentru afișarea datelor grafice despre finanțe și structura lor dinamică.

Una dintre aceste caracteristici este fluxul de date, care vă permite să transmiteți date în timp real către pânză și apoi să le actualizați fără ca utilizatorul să fie nevoie să reîmprospăteze pagina. Și un alt factor pe care îl puteți lua în considerare este performanța, care ar trebui să nu fie o problemă, așa cum este explicat pe pagina de pornire a acestei biblioteci,

„Soluțiile noastre de cartografiere au fost concepute de la început pentru a funcționa cu matrice de date uriașe. Diagramele rămân receptive și agile chiar și cu mii de bare, chiar și cu actualizări de mai multe ori pe secundă cu noi bifături.”

Consultați demonstrația de mai jos pentru a obține o idee despre aceasta, dar și multe dintre opțiunile și funcțiile de diagramă.

Exemplu de grafice ușoare

Vedeți graficul avansat Pen tradingview de truong (@truong160196) pe CodePen.

Grafice ușoare Resurse suplimentare

• Diagrame financiare pentru aplicația dvs

#10 – Panou publicitar

Billboard este o bibliotecă de diagrame de interfață bazată pe D3. Are toate caracteristicile moderne la care te-ai aștepta – randare SVG, suport tactil pentru dispozitive mobile, o interfață simplă și documentație excelentă API.

Cu toate acestea, caracteristica mea preferată și, probabil, pentru mulți alții, este că Billboard oferă peste 230 de exemple de diagrame pe care le puteți crea cu această bibliotecă. Aceste exemple sunt împărțite în categorii de diagrame, cum ar fi de bază, axă, date, grilă, interacțiune, regiune și multe altele.

Aceasta înseamnă că nu numai că puteți găsi tipul de diagramă corect pentru proiectul dvs. și cerințele acestuia, dar puteți explora și alte opțiuni și puteți vedea dacă un anumit exemplu vă captează atenția.

Exemplu Billboard.js

Consultați Solicitările de diagramă în stilou – Billboard.js de la DTCC (@dtcc) pe CodePen.

#11 – Perspectivă

Perspectiva este unul dintre proiectele pe care FINOS (Open-Source Fintech) le operează, iar FINOS însuși face, de asemenea, parte din Fundația Linux. La fel ca Lightweight Charts – Perspective.js este orientat spre furnizarea de soluții grafice pentru proiecte bazate pe finanțare. Cu toate acestea, este capabil de mult mai mult decât atât și vede o utilizare frecventă în proiecte legate de comerțul electronic, grile de date și segmentarea expedițiilor.

Dacă ați văzut vreodată grafice despre Covid-19, aeroporturi și evenimente sportive majore precum Jocurile Olimpice, există șanse mari ca interfața și integrarea fluxului de date să fi fost realizată cu Perspective. Are o interfață de utilizator bogată, optimizată pentru fluxuri de date și analize complexe în timp real.

Este disponibil pentru dezvoltatorii JavaScript și Python și folosește Componenta web Custom Elements.

# 12 – Diagrama UI Toast

În orice caz, biblioteca de diagrame Toast UI este încă o altă alegere de luat în considerare în ceea ce privește stilurile de diagramă și designul lor. Funcționalitatea de aici este foarte asemănătoare cu bibliotecile pe care le-am analizat deja.

Cred că domeniul în care Toast UI diferă de alte opțiuni este specificația sa API. Este probabil unul dintre cele mai bune API-uri pe care le puteți pune mâna și vine cu o documentație aprofundată gratuită. Una dintre caracteristicile API este Instanțele , o modalitate prin care puteți modifica dinamic datele diagramei fie pentru că sursa dvs. de date s-a schimbat, fie din cauza introducerii utilizatorului.

Tipurile de diagrame pe care le acceptă Toast includ bare, coloane, linii, zone, bule, hărți arbore, radare, bare radiale și altele. Modul preferat de a utiliza această bibliotecă este prin npm, dar este disponibil un CDN și tot ce trebuie să faceți este să specificați un div id="chart" pentru locul în care doriți să fie afișată diagrama.

#13 – Recarturi

Dacă lucrați în principal cu React.js, biblioteca Recharts este construită pe deasupra D3.js cu React. Respectă arhitectura componentelor native React.js, iar diagramele create cu Recharts pot fi decuplate și reutilizate ca componente individuale în paginile de care aveți nevoie.

Toate exemplele de diagrame au structura lor componente pre-scrisă în cazul în care doriți să le încercați într-un proiect existent. Biblioteca a fost lansată pentru prima dată în 2016, dar este încă în dezvoltare activă.

Recharts Exemplu

Vedeți Pen ReCharts de binu (@binutomy) pe CodePen.