9 librerie Javascript per costruire grafici interattivi
Quindi hai in mano tonnellate di dati, con un numero di variabili, che devi in qualche modo trasmettere a qualcun altro. Dati grezzi e non organizzati saranno difficili da comprendere per loro. Questo è il motivo per cui hai bisogno di aiuto dai grafici. Nel web design, i grafici sono uno dei migliori strumenti per la visualizzazione dei dati . È facile da leggere, facile da vedere e relativamente facile da configurare.
Ma facciamo un passo avanti: aggiungiamo animazione e interattività a quei grafici, in modo che i lettori non solo imparino qualcosa di nuovo dal grafico, ma giochino anche con esso. In realtà è più facile di quanto sembri, grazie a un numero di librerie JS là fuori. Vediamoli.
1. Grafico JS
Chart.js è una libreria senza dipendenza per creare grafici in 6 diversi tipi: grafici a linee, grafici a barre, grafici radar, grafici polari, grafici a torta e ad anello. La libreria è anche divisa in base al tipo di grafico in modo che le pagine non siano impantanate con ciò che non è necessario. Supporta la progettazione reattiva e puoi facilmente modificare variabili come il colore o l'animazione per personalizzare l'interfaccia del grafico.
2. Chartist JSChartist JS è una grande libreria per creare grafici reattivi che fanno uso di SVG. Oltre alla sua reattività, Chartist ti offre la flessibilità utilizzando una chiara separazione delle preoccupazioni: stile con CSS e controllo con JS. Per semplificare la personalizzazione, i file SASS sono inclusi. Il bello è che hai opzioni illimitate per animare il tuo grafico usando l'API di animazione Chartist, SMIL, che ti offre ulteriori opzioni di animazione.
3. C3 JSC3 JS è una libreria per creare grafici basati su D3 JS. Include il codice richiesto per creare grafici con D3 JS, quindi puoi saltare la scrittura del codice D3 e inserire solo i tuoi dati. C3 ha una varietà di API che puoi usare per controllare facilmente i tuoi grafici. Per personalizzare il tuo grafico, definisci i tuoi stili personalizzati per le specifiche classi CSS. Costruisci grafici da semplici grafici a linee per misurare i grafici. Dai un'occhiata a questa pagina per vedere come funziona la biblioteca.
4. FlotFlot è un plguin di jQuery per la creazione di grafici con elementi interattivi come l'attivazione o la disattivazione di una serie, le interazioni tra punti dati, la panoramica, lo zoom e altro. Flot viene fornito con una varietà di opzioni del tipo di grafico e se vuoi avere più abilità sul tuo grafico, ecco alcuni plugin che puoi usare anche tu. I grafici funzioneranno bene con i browser che supportano le tele HTML.
5. EChartEchart è una libreria incredibilmente completa dalla Cina che supporta diversi tipi di grafici, in grado di elaborare i big data (tracciare fino a 200.000 punti dati su un grafico cartesiano), ha roaming su larga scala, la capacità di estrarre, integrare e scambiare facilmente dati tra più grafici, consentendo di passare facilmente da un tipo di dati a un altro e molto altro ancora.
6. PeitàPeity aggiungerà un mini grafico alla tua pagina web. È un piccolo plugin jQuery che trasforma un elemento in una mini linea svg
, barra, ciambella o grafico a torta. Hai solo bisogno di creare un elemento e dare un valore come 1/5
e fare una call peity('pie')
su quell'elemento per creare un mini grafico a torta. Ad esempio, per creare un grafico ad anello che è solo un quinto evidenziato, ecco l'HTML:
1/5
È possibile personalizzare il colore del grafico, il raggio, la larghezza e l'altezza, ma per impostazione predefinita è visualizzato in dimensioni ridotte.
7. DC JSDC JS ha somiglianze con C3 JS in termini di motore utilizzato; entrambi usano la libreria D3 per il rendering di grafici in SVG. DC JS è stato creato per aiutarti a visualizzare dati e analisi per browser e dispositivi mobili. Poiché sfrutta la D3 JS, ti consente di aggiungere l'interazione dell'utente al tuo grafico. DC JS è una potente libreria per creare grafici dalle complessità semplici alle alte.
8. Google ChartPuoi creare grafici e strumenti di dati interattivi utilizzando l'API di visualizzazione di Google tramite Google Chart. Ci sono gallerie grafiche per verificare le capacità di visualizzazione dei dati di Google Chart. Per iniziare, inserisci un semplice JavaScript nella tua pagina web per caricare le librerie di Google Chart che ti servono. Quindi elencare i dati che si desidera tracciare e apportare alcune personalizzazioni tramite le opzioni del grafico. Infine crea un oggetto grafico con un ID e sulla tua pagina web crea un
NVD3 è un set di grafici riutilizzabili e componenti grafici creati con D3 JS. Questa libreria è quindi un "modello" che ti aiuterà a creare grafici più facilmente. Dai un'occhiata ai numerosi esempi di grafici creati con NVD3 qui.
Ora Leggi: librerie JavaScript per creare mappe interattive e personalizzate10 cose che il tuo smartwatch dovrebbe essere in grado di fare
Quindi c'è un tesoro di recensioni di Apple Watch che fanno il giro giusto adesso. Durante la lettura, non è possibile allontanarsi dall'idea che alcuni non sono ancora convinti che lo smartwatch meriti di essere investito . E questo probabilmente perché lo smartwatch non è stato in grado di convincere le masse che sta facendo qualcosa che uno smartphone normale non può fare.Inve
Come eseguire i test sincronizzati usando Ghostlab
Nel post precedente, ti abbiamo mostrato come eseguire test sincronizzati usando Browser Sync. Se hai seguito il post, vedi che i "test sincronizzati" miglioreranno il tuo flusso di lavoro di sviluppo in termini di test del sito web ottimizzato per dispositivi mobili su più browser e dispositivi contemporaneamente.