it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


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 JS

Chartist 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 JS

C3 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. Flot

Flot è 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. EChart

Echart è 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 JS

DC 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 Chart

Puoi 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

con quell'id per mostrare il tuo grafico.

9. NVD3

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 personalizzate

5 Sintetizzatori Open Source che puoi costruire e hackerare

5 Sintetizzatori Open Source che puoi costruire e hackerare

L'intera scena fai-da-te (fai-da-te), open source maker electronics, che ha guadagnato molta popolarità negli ultimi anni, ha portato alla creazione di molti dispositivi e kit davvero interessanti sul mercato. Il bello, naturalmente, è che non si limita solo agli appassionati di informatica e robotica: anche i musicisti hanno beneficiato di questo movimento DIY open source.A

(Consigli tecnici e di design)

25 disegni di carte di nozze per la tua ispirazione

25 disegni di carte di nozze per la tua ispirazione

Quando è il giorno del tuo matrimonio, vuoi essere sicuro che ogni dettaglio sia perfetto. Il fotografo giusto, il tema che vuoi e anche la cartoleria rimarranno nella tua memoria molto tempo dopo aver detto "I do". Le carte Escort possono essere solo uno di questi piccoli dettagli .La carta presenta il nome di una persona e il numero del tavolo al quale saranno seduti.

(Consigli tecnici e di design)