Valutazioni dell’editore: Valutazioni degli utenti:[Totale: 0 Media: 0].ilfs_responsive_below_title_1 { width: 300px; } @media(larghezza minima: 500px) {.ilfs_responsive_below_title_1 { larghezza: 300px; } } @media(larghezza minima: 800px) {.ilfs_responsive_below_title_1 { larghezza: 336px; } }
Chartist è una libreria di generazione di grafici SVG open source gratuita che è possibile utilizzare. È molto avanzato e supporta la generazione di molti grafici con molti parametri. Con questo, puoi generare grafici colorati di qualsiasi dimensione e inserirli nel tuo sito web. Supporta persino l’animazione tramite CSS e quindi, con l’aiuto di questa libreria, sarai in grado di generare grafici e grafici animati.
Nella creazione di dashboard e pagine Web per mostrare alcuni tipi di dati relativi ai rapporti, hai bisogno di grafici. Molte volte, dovevano essere dinamici o statici. Ci sono strumenti là fuori per questo, ma non come Chartist. Questo è probabilmente unico nel suo genere. Viene fornito con una documentazione molto dettagliata e ottimi esempi in modo da poter imparare a generare grafici abbastanza rapidamente.
Elenco dei tipi di grafici supportati da Chartist:
Grafico a barre (in pila e orizzontale incluso) Grafico a linee Grafico a torta Grafico ad area Grafico ad anello Grafico a indicatore Line scatter Diagramma Percorso SVG animato Grafico a linee bipolare Serie temporali
Caratteristiche dei grafici generati da Chartist:
Configurazione estremamente reattiva. Posizionamento delle etichette Etichette multilinea Barre sovrapposte per dispositivi mobili Buchi nei dati Animazione CSS Animazione SVG Animazioni SMIL avanzate Supporto plug-in
Come utilizzare Chartsit per generare grafici SVG?
Esistono diversi modi per utilizzare questa libreria. A seconda del tipo di sviluppatore frontend che sei, puoi usarlo. Viene fornito come modulo Node e file di script incorporabile che puoi servire direttamente su HTML tramite CDN.
Per semplicità, puoi usarlo nei documenti HTML abbastanza facilmente. Devi solo importare questi file nella sezione
del tuo sito web. https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.jsDopo aver collegato le librerie, devi solo scrivere un elemento
Ora, aggiungi un tag di script che genererà effettivamente il grafico nel contenitore specificato. Questo è in realtà molto semplice. Se conosci molto bene JavaScript, puoi passare attraverso la documentazione per vedere come generare un grafico. A scopo dimostrativo, puoi semplicemente utilizzare il codice seguente. Aggiungilo appena sotto l’elemento
Ora hai quasi finito. Basta aprire il file HTML nel browser. Il grafico verrà generato ora per te. Puoi giocare con il codice JS per generare grafici personalizzati basati su dati diversi. Inoltre, puoi generare un diverso tipo di grafico in questo modo.
La documentazione sul sito Web principale di Chartist è molto ben dettagliata. Ha molti esempi anche su come creare grafici animati. Come sviluppatore front-end, dovrai esaminare quella documentazione per generare un grafico. E con un po’di codice, puoi anche renderli esportabili.
Pensieri conclusivi:
Devo dire che Chartist è uno strumento prezioso per sviluppatori e designer per integrare grafici personalizzati in staging così come il sito web in produzione. È molto semplice e non devi scrivere un pezzo di codice molto lungo a meno che tu non stia creando qualcosa di veramente complesso. Il repository GitHub ha già più di 10.000 stelle, il che è di per sé un enorme risultato.
