Librerie di grafici JavaScript: 13 scelte popolari

#1 – Grafico.js

Chart.js è una pratica libreria di grafici che utilizza <canvas> di HTML5 per eseguire il rendering dei grafici.

La libreria è facilmente la scelta migliore per progetti semplici, per motivi come il fatto che è reattiva per impostazione predefinita e puoi anche applicare effetti di animazione in base al comportamento dell'utente.

Ecco gli 8 tipi di grafici che puoi creare con Chart.js:

• Grafico ad area
• Grafico a barre
• Grafico a bolle
• Ciambella e grafici a torta
• Grafico a linee
• Tipi di grafici misti
• Grafico dell'area polare
• Grafico radar

Per quanto riguarda la facilità d'uso, la sintassi è semplice e, anche se non hai mai lavorato con JavaScript prima, la creazione di un nuovo grafico è semplice.

 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 }] };

Se desideri estendere i grafici con funzioni dinamiche e pool di dati, la libreria dispone di un sistema di plug-in che puoi utilizzare per aggiungere nuove funzionalità.

Esempio di Chart.js

Vedi la prova del concetto della penna: Chart.js con gradiente di sfondo di Sven (@hofmannsven) su CodePen.

Risorse aggiuntive di Chart.js

• Chart.js + Next.js = Bellissimi dashboard basati sui dati
• Guida introduttiva a Chart.js; Apprendimento basato sui compiti

#2 – D3.js

Vorrei iniziare dicendo che D3 è uno strumento di visualizzazione dei dati piuttosto che una tradizionale libreria di grafici.

D3 ti consente di specificare un set di dati e associarlo al DOM, in seguito puoi utilizzare le funzioni delle librerie per trasformare quei dati in una rappresentazione visiva univoca. Per quanto riguarda la presentazione visiva, D3 sfrutta le tabelle HTML, SVG e <canvas> per il rendering dei dati su una pagina.

Se hai mai visto uno di quei globi rotanti geo-based con più punti dati interattivi su di essi, è probabile che la presentazione sia stata creata con D3. Tuttavia, funziona bene anche per usi pratici, come il grafico di base che puoi vedere nella demo qui sotto. In definitiva, ti consigliamo di fare riferimento alla sezione Tutorial ufficiale per D3 per esplorare le sue capacità più complesse.

Esempio D3.js

Guarda il grafico Pen D3 + ReactJS di Web Dev (@ronaldmarin) su CodePen.

Risorse aggiuntive D3.js

• Esercitazione su D3.js
• Creazione di una mappa termica del calendario D3.js

#3 – Grafici Apache

Uno dei motivi per cui Apache ECharts è così popolare è che puoi accedere a centinaia di esempi di grafici predefiniti immediatamente. Puoi verificarlo tu stesso visitando la directory degli esempi. Questa pagina copre grafici ed esempi in categorie come linee, barre, grafici a torta, dispersione, mappe di calore, grafici e molto altro ancora.

Inoltre, ogni singolo esempio include esempi di codice JavaScript e TypeScript. Ma non è tutto, ci sono alcuni vantaggi nel mondo reale nell'usare questa libreria. Eccone alcuni:

• Flusso di dati. Vuoi creare grafici interattivi con milioni di punti dati? ECharts utilizza WebSocket per lo streaming di dati in modo che possano essere caricati in modo asincrono anche con set di dati estremamente grandi.
• Adatto ai dispositivi mobili. Quando gli utenti visualizzano un ECChart sui propri dispositivi mobili, il grafico stesso è stato ottimizzato per fornire funzionalità interattive: zoom, panoramica e rendering SVG per garantire la migliore consegnabilità.
• Dati dinamici. Puoi alimentare ECChars più punti dati (separati) e la libreria animerà automaticamente il grafico per offrire agli utenti un'esperienza interattiva.
• Accessibilità. Apache ECharts (v4.0 e successive) è costruito per seguire le linee guida WAI-ARIA.

Puoi anche visualizzare i tuoi grafici sul tuo sito web utilizzando una CDN esterna.

Esempio di Apache ECarts

Vedi l'esempio di penna Apache Echart di Vale (@vsigno) su CodePen.

Risorse aggiuntive di Apache ECCharts

• Costruisci uno strumento GitHub Insight migliore in una settimana

#4 – Complotto

Plotly è la società madre di Dash, una soluzione low-code per l'implementazione di applicazioni dati. E sviluppano la propria libreria grafica – Plotly – in loco.

Con Plotly, puoi creare le visualizzazioni di grafici più semplici, ma il vero potere della libreria risiede nella capacità di produrre grafici basati su statistiche, rappresentazioni di dati 3D e grafici basati su dati finanziari.

È disponibile sia come modulo Node.js, ma può anche essere utilizzato direttamente da una CDN.

Esempio di trama

Vedere l'annotazione Pen Add on click event di plotly (@plotly) su CodePen.

#5 – Frappe

La libreria dei grafici Frappe è creata dalle persone che hanno creato Frappe Framework. Questa libreria è semplicissima. E quella semplicità è un importante fattore che contribuisce alla popolarità della biblioteca.

La libreria non richiede dipendenze esterne e può eseguire il rendering di grafici SVG ottimizzati per dispositivi mobili in poche righe di codice. Ecco un esempio di codice per un grafico Axis di base:

 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'] });

E questo piccolo frammento si tradurrebbe in un grafico come questo:

C'è anche il supporto per grafici misti (più grafici in uno), annotazioni, mappe di calore ed è disponibile un'API se prevedi di aggiornare i dati in tempo reale o di esportarli.

Esempio Frappe

Guarda la penna Frappe Hello World di Jang Rush (@weakish) su CodePen.

#6 – Grafici Apex

ApexCharts è una libreria di grafici molto tradizionale. La principale differenza tra ApexCharts e Frappe (ad esempio) è che ApexCharts fornisce un po' più di demo. Ma offre anche supporto nativo per framework popolari come React, Vue e Angular. Ciò significa anche che tutti i grafici demo hanno i rispettivi campioni scritti nella sintassi di detti framework.

Per quanto riguarda le funzionalità, tutti i grafici sono generati in formato SVG e sono ottimizzati per i dispositivi mobili per impostazione predefinita. Puoi anche sfruttare funzionalità come animazioni fluide e annotazioni e personalizzare la tavolozza del tema del grafico selezionando uno dei 10 stili di esempio.

Esempio di ApexCharts

Guarda il dashboard Pen Realtime di ApexCharts (@apexcharts) su CodePen.

#7 – G2

Di recente ho parlato di Ant Design in diverse occasioni, anche nei miei articoli sulle librerie di componenti per React.js e Vue. Non solo Ant è estremamente popolare su GitHub, ma le comunità lo adorano in tutte le regioni del mondo.

E la libreria dei grafici G2 (o come la chiamano "Grammatica della visualizzazione") è l'implementazione di Ant Design di un sistema di grafici che utilizza Ant Design System. Consiglio vivamente di controllare la homepage di AntV, dove troverai molte altre librerie relative alla visualizzazione dei dati in tempo reale.

Viene spesso utilizzato per creare elementi come dashboard di amministrazione, creare percorsi di dati e creare esempi di visualizzazione dei dati interattivi utilizzando il suo motore di rendering. Questo motore può eseguire il rendering di grafici e vettori di dati tramite WebGL, Canvas e SVG. E poiché la libreria è collegabile, puoi migliorare ulteriormente le presentazioni dei tuoi grafici attraverso librerie più solide come D3.js (che abbiamo visto in precedenza).

#8 – grezzoViz

La libreria roughViz di Jared Wilber è una combinazione di 3 diverse librerie: D3.js, Rough.js e handy, un elaboratore di schizzi disegnato a mano. Come puoi vedere dallo screenshot di esempio sopra, questa non è la tua tipica libreria di grafici. roughViz è costruito interamente con lo scopo di aiutarti a creare grafici in stile schizzo disegnati a mano usando JavaScript.

Questo tipo di biblioteca sarà un'ottima aggiunta ai progetti personali, in altre parole, progetti che richiedono una scintilla più creativa rispetto al tradizionale approccio professionale. E la sintassi stessa è semplice come potrebbe essere, molto in linea con artisti del calibro di Frappe e ApexCharts.

Puoi vederlo di persona nella demo qui sotto.

Esempio di roughViz

Guarda la demo di Pen RoughViz di Danny Englishby (@DanEnglishby) su CodePen.

# 9 – Grafici leggeri

Se stai lavorando a un progetto relativo alla finanza (o alla criptovaluta per quella materia), è abbastanza chiaro che molte delle librerie di grafici menzionate in precedenza non lo taglieranno. In quanto tale, ecco i grafici leggeri, una libreria di grafici creata appositamente per la visualizzazione di grafici e grafici basati sulla finanza.

Non solo questa libreria è open source e leggera, ma racchiude anche tutte le funzionalità necessarie per visualizzare i dati dei grafici sulle finanze e sulla loro struttura dinamica.

Una di queste funzionalità è lo streaming di dati, che ti consente di passare i dati in tempo reale alla tua tela e quindi di aggiornarli senza che l'utente debba aggiornare la pagina. E un altro fattore che potresti considerare sono le prestazioni, che dovrebbero non essere un problema come spiegato nella home page di questa libreria,

“Le nostre soluzioni per la creazione di grafici sono state progettate fin dall'inizio per funzionare con enormi array di dati. I grafici rimangono reattivi e agili anche con migliaia di barre anche con aggiornamenti più volte al secondo con nuovi tick".

Dai un'occhiata alla demo qui sotto per avere un'idea, ma anche molte delle opzioni e delle funzionalità del grafico.

Esempio di grafici leggeri

Guarda il grafico avanzato Pen tradingview di truong (@truong160196) su CodePen.

Risorse aggiuntive per grafici leggeri

• Grafici finanziari per la tua applicazione

# 10 – Tabellone per le affissioni

Billboard è una libreria di grafici di interfaccia basata su D3. Ha tutte le moderne funzionalità che ti aspetteresti: rendering SVG, supporto touch per dispositivi mobili, un'interfaccia semplice e un'ottima documentazione API.

Tuttavia, la mia caratteristica preferita, e probabilmente anche per molte altre, è che Billboard fornisce oltre 230 esempi di grafici che puoi creare con questa libreria. Questi esempi sono suddivisi in categorie di grafici come Base, Asse, Dati, Griglia, Interazione, Regione e molti altri.

Ciò significa che non solo puoi trovare il tipo di grafico corretto per il tuo progetto e i suoi requisiti, ma puoi anche esplorare altre opzioni e vedere se un particolare esempio cattura la tua attenzione.

Esempio di Billboard.js

Vedi le richieste di grafici a penna - Billboard.js di DTCC (@dtcc) su CodePen.

#11 – Prospettiva

Perspective è uno dei progetti gestiti da FINOS (Open-Source Fintech) e FINOS stesso fa anche parte della Linux Foundation. Proprio come i grafici leggeri, Perspective.js è orientato a fornire soluzioni di grafici per progetti basati sulla finanza. Tuttavia, è in grado di fare molto di più e vede un uso frequente in progetti relativi all'eCommerce, alle griglie di dati e alla segmentazione delle spedizioni.

Se hai mai visto grafici su Covid-19, aeroporti e importanti eventi sportivi come le Olimpiadi, ci sono buone probabilità che l'interfaccia e l'integrazione del flusso di dati siano state eseguite con Perspective. Ha una ricca interfaccia utente, ottimizzata per flussi di dati e complesse analisi in tempo reale.

È disponibile per gli sviluppatori JavaScript e Python e utilizza il componente Web di elementi personalizzati.

# 12 – Grafico dell'interfaccia utente di Toast

Semmai, la libreria di grafici dell'interfaccia utente di Toast è un'altra scelta da considerare per quanto riguarda gli stili dei grafici e il loro design. La funzionalità qui è molto simile alle librerie che abbiamo già visto.

Penso che l'area in cui l'interfaccia utente di Toast differisca dalle altre scelte sia la sua specifica API. È probabilmente una delle migliori API su cui puoi mettere le mani e viene fornita con documentazione approfondita gratuita. Una delle funzionalità dell'API è Instances , un modo per modificare dinamicamente i dati del grafico perché l'origine dati è cambiata oa causa dell'input dell'utente.

I tipi di grafico supportati da Toast includono barre, colonne, linee, aree, bolle, mappe ad albero, radar, barre radiali e altri. Il modo preferito per utilizzare questa libreria è tramite npm, ma è disponibile una CDN e tutto ciò che devi fare è specificare un contenitore div id="chart" per dove desideri visualizzare il grafico.

#13 – Grafici

Se lavori principalmente con React.js, la libreria Recharts è basata su D3.js con React. Rispetta l'architettura dei componenti nativa di React.js e i grafici creati con Recharts possono essere disaccoppiati e riutilizzati come singoli componenti nelle pagine richieste.

Tutti gli esempi di grafici hanno la loro struttura dei componenti prescritta nel caso tu voglia provarli in un progetto esistente. La libreria è stata rilasciata per la prima volta nel 2016 ma è ancora in fase di sviluppo attivo.

Esempio di grafici

Guarda i Pen ReCharts di binu (@binutomy) su CodePen.