Contenuto
In qualità di sviluppatore web reattivo, cerco costantemente di portare le tecnologie standard sotto un unico cofano, cercando anche di tenere il passo con la promessa del W3C One Web.
Rendere disponibili le stesse informazioni, design e interazioni su ogni mezzo, nonostante ognuno abbia le proprie limitazioni particolari, potrebbe sembrare impossibile all'inizio. È una delle parti più impegnative del lavoro di uno sviluppatore, ma penso ancora che questa sia una promessa che possiamo e dobbiamo mantenere.
Il problema con la mancata visualizzazione di alcuni contenuti su determinati media o l'esclusione di alcune interazioni non è proprio che si rompe un contratto W3C, ma che incasina le aspettative dei nostri utenti. È qui che paghiamo la multa.
Non c'è niente di più fastidioso che scoprire che il tuo pulsante preferito su un sito web non esiste quando sei seduto sull'autobus e hai voglia di premerlo! Nella mia esperienza, questo può persino indurre un utente a scegliere semplicemente di non visualizzare completamente un sito Web su un supporto virtuale.
Penso che questi principi dovrebbero essere applicati a qualsiasi contenuto sul Web e questo include la visualizzazione dei dati.Di fronte a un progetto per un cliente che voleva che implementassi un dashboard delle prestazioni che dovrebbe essere accessibile su un cellulare e tablet, ma anche visualizzato bene su un grande televisore widescreen, Ifelt ha perso con le opzioni disponibili.
C'erano già tonnellate di buone librerie di grafici là fuori, ma nessuna di esse risolveva effettivamente il problema di generare grafici semplici e dall'aspetto gradevole che si comportassero anche in modo reattivo.
Dopo aver passato ore a cercare di modificare le librerie esistenti per farle comportare come volevo, ho semplicemente deciso di crearne una mia. Questo ha segnato la nascita di Chartist.js.
Alzarsi e correre
Il modo più semplice per iniziare con Chartist.js è utilizzare il gestore di pacchetti Bower (bower.io). È quindi possibile installare l'ultima versione di Chartist.js digitando il seguente comando nella shell:
bower install chartist - salva
Ora avrai Chartist.js installato localmente e in attesa di ulteriori istruzioni. Tutto quello che devi fare è aggiungere le risorse nel tuo HTML e sei pronto per disegnare dei bei grafici reattivi.
link rel = "stylesheet" href = "bower_components / chartist / libdist / chartist.min.css"> script src = "bower_components / chartist / libdist / chartist.min.js"> / script>
Chartist.js viene fornito senza dipendenze e ha una dimensione compressa inferiore a 10 KB. Lo scopo principale di Chartist.js è risolvere uno e un solo problema, ovvero consentire agli sviluppatori di disegnare grafici semplici e reattivi. Lo fa utilizzando la potenza degli standard web, come SVG inline nel DOM e CSS per il suo aspetto. Con questa netta separazione delle preoccupazioni e sfruttando le tecnologie standard, Chartist.js è in grado di fornirti tutto ciò di cui hai bisogno e nient'altro.
Chartist.js affronta un solo problema: consentire agli sviluppatori di disegnare grafici semplici e reattivi
Il problema più grande che sto attualmente riscontrando con molte librerie è che stanno cercando di risolvere troppi problemi e dimenticano il fatto che sono librerie e non applicazioni. Sono sicuro che ti sei imbattuto in situazioni in cui una libreria personalizza tutto tranne l'unica cosa che ti piacerebbe davvero personalizzare. Basandosi sugli standard web, puoi facilmente estendere la funzionalità di Chartist.js e ridimensionare linearmente.
Hackerare il tuo primo grafico
Ora che hai incluso Chartist.js nel tuo progetto, puoi andare avanti e creare il tuo primo grafico. La libreria viene fornita con alcuni stili predefiniti che possono essere facilmente sovrascritti o personalizzati con la versione Sass (SCSS).
Se desideri utilizzare gli stili predefiniti, puoi semplicemente utilizzare la classe CSS predefinita .ct-chart per creare un contenitore di grafici nel tuo HTML.
div class = "ct-chart"> / div>
Questo è già tutto per la parte HTML. Ovviamente dipende da te se desideri utilizzare un div> o qualsiasi altro elemento che ritieni si adatti meglio al contesto.
Chartist.Line ('. Ct-chart', {labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], series: [[0, 3, 2, 8, 9] , [1, 2, 3, 5, 8]]}, {larghezza: '300px', altezza: '200px'});
Congratulazioni, hai appena creato il tuo primo grafico utilizzando Chartist.js! Non era un gioco da ragazzi? Ma aspetta ... non dovrebbe essere una libreria di grafici reattiva? Ovviamente non consiglierei di utilizzare dimensioni fisse per il tuo grafico, basate sui pixel, giusto?
Pagina successiva: ulteriori informazioni su come creare grafici reattivi con Chartist.js
