La struttura del tuo file dovrebbe assomigliare a questa:

├── 404.html ├── crossdomain.xml ├── css │ ├── main.css │ └── normalize.css ├── favicon.ico ├── img ├── index.html ├── js │ ├── main.js │ ├── plugins.js │ └── vendor │ ├── jquery-1.10.1.min.js │ └── modernizr-2.6.2.min.js └── robot. testo

Nota: questo non include alcuni dei file inclusi in H5BP che non useremo.

Palette dei colori

Prima di entrare nella codifica del sito, iniziamo impostando una tavolozza di colori che useremo per tutta la progettazione. Così facendo, possiamo stabilire una futura "guida allo stile" di sorta; questa è una pratica comune praticamente per ogni progetto dato.

Se stai costruendo la dashboard con un particolare marchio in mente, inizia usando i colori del marchio. Oggi definiremo due colori principali e due colori ausiliari. Useremo anche le sfumature o le versioni sfumate di questi colori.

• blu scuro: # 637b85
• verde: # 2c9c69
• giallo: # dbba34
• rosso: # c62f29

Useremo anche una tonalità più chiara del blu scuro, # d0dde3. Infine, utilizzeremo i colori in scala di grigi.

Nozioni di base di ChartJS

ChartJS utilizza l'elemento canvas. L'elemento canvas fornisce un'interfaccia solo JavaScript per disegnare pixel in una data area del rettangolo. Viene spesso paragonato a SVG, che offre una soluzione basata su nodo DOM per la creazione di grafica vettoriale nel browser. Tuttavia, i pixel disegnati sull'elemento canvas non vengono mantenuti in memoria e quindi non rispondono agli eventi JavaScript.

Ma basta con il discorso tecnico: come iniziare rapidamente con ChartJS?

Fortunatamente, la homepage di ChartJS ha un sacco di esempi per iniziare rapidamente. Lo schema di base consiste nel creare l'elemento canvas in HTML, selezionarlo con JavaScript e creare il grafico mentre si passano i dati dal grafico creato da.

L'esempio precedente presuppone che tu abbia definito "dati" e "opzioni" come oggetti e che di conseguenza generi un grafico a linee.

Nel nostro esempio, utilizzeremo il grafico ad anello, il grafico a linee e il grafico Radar. Questi grafici rappresenteranno diverse metriche orientate al business, ma ovviamente puoi prenderlo e adattarlo alle tue esigenze.

Markup della pagina

Iniziamo definendo un codice HTML di base per il layout della nostra pagina.

Qui, possiamo vedere che abbiamo una sezione di intestazione, middle e footer di base. Stiamo usando la classe .wrapper e la classe .push per creare un footer sticky (vedi qui per maggiori informazioni). Creeremo il nostro layout in modo che sia mobile-friendly per primo, e di aumentare gradualmente da lì. Ci sono alcuni trucchi che tireremo avanti, ma questa struttura farà molto del lavoro per noi.

Prima di andare troppo lontano ...

Tieni presente che la tela non funziona molto bene con le query multimediali. Per questo tutorial, creeremo una soluzione alternativa per consentire la ridisegnazione dei grafici a diverse dimensioni in JavaScript.

All'interno del nostro file main.js, avremo bisogno di avere una funzione di dimensionamento che viene attivata da un ridimensionamento della finestra. Avremo anche bisogno di una funzione "ridisegna" per sparare dopo che la funzione di ridimensionamento si è attivata. Infine, quando ridisegniamo i grafici, non vogliamo che si animino, come se fosse la prima volta che venivano disegnati.

(function () // imposta la variabile timeout var t; // imposta la funzione di dimensionamento, // con un argomento che dice al grafico di animare o meno la dimensione della funzione (animato) // Se stiamo ridimensionando, non Non voglio che i grafici disegnino su ogni evento di ridimensionamento // Questo cancella il timeout in modo che eseguiamo solo la funzione di dimensionamento // quando abbiamo finito il ridimensionamento della finestra clearTimeout (t); // Questo resetterà il timeout subito dopo averlo cancellato .t = setTimeout (function () $ ("canvas"). each (function (i, el) // Imposta l'altezza e la larghezza dell'elemento canvas rispetto all'altezza e alla larghezza del padre. // L'elemento genitore è il div. canvas-container $ (el) .attr ("width": $ (el) .parent (). width (), "height": $ (el) .parent (). outerHeight ());); // kickoff la funzione di ridisegno, che costruisce tutti i grafici ridisegna (animato); // fa un ciclo tra i widget e trova quello più alto e li imposta tutti a tale altezza. var m = 0; // dobbiamo rimuovere prima qualsiasi impostazione di altezza in linea in modo da ottenere l'altezza automatica. $ (". widget"). height (""); $ (". widget"). each (function (i, el) m = Math.max (m, $ (el) .height ());); $ ( "Widget") altezza (m).; , 100); // il timeout dovrebbe essere eseguito dopo 100 millisecondi $ (finestra) .on ('ridimensiona', dimensione); function redraw (animation) var options = ; if (! animation) options.animation = false;  else options.animation = true;  // ... // il resto del nostro schema grafico avverrà qui // ... size (); // questo dà il via al primo disegno; nota che la prima chiamata alla dimensione animerà i grafici in.

Se questo sembra un po 'scoraggiante, non ti preoccupare! Fai una domanda nei commenti e noi e la comunità di Tuts + ti aiuteremo a comprendere appieno!

Alcuni CSS per iniziare

Vogliamo creare alcune strutture CSS di base per iniziare. HTML5 Boilerplate include naturalmente la normalizzazione e alcune altre impostazioni predefinite che è possibile modificare, ma per il bene del tutorial, scriveremo il nostro CSS dopo la riga "Stili personalizzati dell'autore".

html, body height: 100%;  body font-family: 'Source Sans Pro', sans-serif; colore: # 666;  / * button * / .button cursor: pointer; decorazione del testo: nessuna; font-size: 0.6em; font-weight: 400; text-transform: maiuscolo; display: blocco in linea; imbottitura: 4px 6px; margine: 0 10px; posizione: relativa; sfondo: #ccc; colore: #fff; box-shadow: 0 0 2px rgba (0,0,0,0,1); sfondo: rgb (190,190,190); / * Vecchi browser * / background: -moz-linear-gradient (top, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * FF3.6 + * / background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, rgba (190,190,190,1)), color-stop (100%, rgba (170,170,170,1 ))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (superiore, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (superiore, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (in alto, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * IE10 + * / sfondo: gradiente lineare (verso il basso, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# bebebe", endColorstr = "# aaaaaa", GradientType = 0); / * IE6-9 * / .button: hover background: # 637b85;  / * Stili di intestazione * / header text-align: center; sfondo: # 637b85; colore: #fff; margin-bottom: 40px;  span dell'intestazione font-weight: 200;  header .button font-size: 0.2em; inizio: -6px;  / * contenitori vari * / .container width: 200px; margine: 0 auto;  .canvas-container min-height: 300px; altezza massima: 600 px; posizione: relativa;  .widget position: relative; margin-bottom: 80px; sfondo: #efefef; imbottitura: 12px; margin-bottom: 30px; -webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; dimensionamento della scatola: border-box; 

Qui, definiamo il CSS necessario per il sticky footer, oltre a una classe pulsante, una classe contenitore autocentrante, una classe per contenere i nostri elementi canvas all'interno dei nostri widget e i nostri stessi widget. Dovremo anche aggiungere il carattere Google che stiamo definendo per il corpo includendolo nel nostro tag head.

Il grafico della ciambella

I grafici ad anello sono molto simili ai grafici a torta, tranne che hanno una parte del taglio centrale. Per impostazione predefinita, ChartJS definisce che il 50% dell'area del grafico deve essere escluso; resteremo con questo valore predefinito. Il codice per creare il grafico a forma di ciambella è mostrato sotto.

var data = [valore: 20, colore: "# 637b85", valore: 30, colore: "# 2c9c69", valore: 40, colore: "# dbba34", valore: 10, colore: "# c62f29"]; var canvas = document.getElementById ("hours"); var ctx = canvas.getContext ("2d"); nuovo grafico (ctx). Doughnut (dati);

Qui puoi vedere che abbiamo definito i dati e i colori del nostro grafico a forma di ciambella. Questo è tutto ciò che è necessario per far funzionare il grafico a ciambella. Tuttavia, quali sono ciascuna delle sezioni che rappresentano? Sfortunatamente, ChartJS non ha ancora un modo semplice per definire le etichette per il grafico a forma di ciambella; tuttavia, possiamo creare la nostra leggenda per descrivere ciascuna delle diverse sezioni. Modifica l'html del widget ciambella per includere quanto segue.

Usiamo questi li dalle loro classi molto semplicemente nel CSS, sfruttando la pseudo-classe ': before'.

.chart-legend ul list-style: none; larghezza: 100%; margine: 30px auto 0;  .chart-legend li text-indent: 16px; altezza della linea: 24px; posizione: relativa; font-weight: 200; blocco di visualizzazione; fluttuare: a sinistra; larghezza: 50%; font-size: 0.8em;  .chart-legend li: before display: block; larghezza: 10px; altezza: 16px; posizione: assoluta; a sinistra: 0; inizio: 3px; contenuto: "";  .ship: before background-color: # 637b85;  .rework: before background-color: # 2c9c69;  .admin: before background-color: # dbba34;  .prod: before background-color: # c62f29; 

Successivamente, vogliamo avere un bel "pollice in su" al centro della ciambella. Ciò comporta alcuni trucchi CSS, tra cui una versione di Ol 'Padded Box di Zio Dave per rendere il cerchio reattivo. Useremo lo span con la classe di .status per raggiungere questo cerchio. Aggiungi le seguenti regole a main.css:

.widget.doughnut .status display: block; posizione: assoluta; superiore: 50%; a sinistra: 50%; larghezza: 30%; altezza: 0; padding-top: 12%; imbottitura-fondo: 18%; colore: # 444; margin-top: -15%; margin-left: -15%; font-size: 1.4em; font-weight: 700; allineamento del testo: centro; raggio-limite: 50%; colore di sfondo: #aaa; background-image: url (dati: image / png; Base64, iVBORw0KGgoAAAANSUhEUgAAAF8AAABkCAQAAABK + CQQAAAACXBIWXMAAFKnAABSpwHUSB + cAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8 / L5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N + QWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE + CDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9 / NocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A / hXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V / pHDBYY1hrFGNuayJsym740u2C + 02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT // ID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs + ZmX8xlz7PPryjYVPiuWLskq3RV2ZsK / cqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta + x / + 5Em0mzJ / + DGJ / t8AyNmf2zvs9JmHt6vvmC pYtEFrcu + bYsc / m9lSGrTq9xWbtvveWGbZtMNm / ZarJt + w6rnft3u + 45uy9s / 4ODOYd + Hmk / Jn58xUnrU + fOJJ / 9dX7SRe1LR68kXv13fc5Nm1t379TfU75 / 4mHeY7En + 59lvhB5efB1 / lv5dxc + NH0y / fzq64Lv4T8Ffp360 / rP8f9 / AA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA + f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAUYSURBVHja1JxdTBxVFMd / O7vssgvLtxIQKrSVQluNiqVp0xAepKSpiaFKVEyMD2oQNGisifFJ06TRN2xjS2Js0geNHy9am5q0wRhNLNZUwI9aQmtDMbUtSFsKLOyye3xgl8KyHwM7uzv3vwkk99yZ + TF759xzzz0DQko / z8kl8ckt + U26pEEciZ4vtfAu6ZE7GpUjcr9K + EUyIEs1JC2irf6MGqmUi5ywlvUcpnX1J0wtvhvXsrZC3qNeDfwcnBFa7 + FtclXAz8cRsb2BJhXwS7FHbHfwJBnmx6 + IatlCmdnxtRj4JdSYHd9JeVSbg01mx8 + jJIbV9INnDcUxrMWrYUkl / kbcMawOs + PXYYlhtZh78BRSG9M + S8DM + JupimkfNTd + U8yRD1fMPHhK2B3TPsegmfEfizMtjZsZv5QXscbscZ5hs + JrtPFInD6nuG1W / D10xPHqY5xc5bmTvjx / VIYlnj4VuxkzDZo0y99x4SekyYyJEqd0yqjE15fiNB9 + kXwoHh3wt2Sn + dJUZfKF + SIPA ++ ThV8sX4s + JTDuk4VvlwOiV8fElci1kuH3G3leZ88ZjjKd2Ixo / IL8hTix5R2d5btEJ3SjVUuD7r5fccNc + BZayNPZ9wrfJh5OGavKOHH9Yp1hyGz4u1mru + 9PeM2Fn0eL7oyBl3NGxOJGakecbMJSpzlmLnw7z0bYPYkmG5mJX9JmIP4Wdq6gt4smJsnEjg0NKxpa8LeFAH4C + PEx wwyzeLjNNB68SJijE6PgrRzipRUdMctsENoS / BD8GYplAvjxM8csk9xknBEG + J4 / F2WEDIt06uSapEL / yFuSbXTIZpNuSZW8clDcxuLv0LWuMko + 2T + / OjbG82TSTlEKc9U2XuUp48Z + s9yWVOu8bDDm7hfzBtmkWht4BZtmwMTXznbSoSfYmrjfb + QT7iI96k4Uv5LPqCNdupQYfj6HeJr0yWsLBlsFOCKGuoKHceaihMf7aSGdGrQI1NHJwxFLVQCm6KWL35e1V7CPZ + Jk7ZOr / 2hH6mUwro / tk5qFHE65VMhmeVn6JCDplF / eFStyUlfnriD + JumXYbkuc5JuHZcCwcY2XV / UVnKYAOysIZ / 06yr7GAdN53zpWigkEsygs / StZLFowVxyz5eVaaipB + cnS1Xxc + ggS1182MUelfEz6aRCXXx4iHaV8TVaVcaHTJXx / RxVGf8b3lcX / 2fe5Lqq + Bd5jQuq + n0P79CrbtAwwPGQ71Tz7ntVxl8bKuZWE788tPWtJr7G4 / M7Y6o6zu08oDJ + IbtUxodtZKqM78KqMv6PTKmL388Rdcf + ZfZyUVX8ETroUXXaGqYtFLCphz9KJycWT79qqZtjS6MHlTRNz9IMt1r4PqbCYze1ZFEZXwvfClQLX8L3dtTCH + Wayvifh7 / DPEN + 2qI8PClUDweXD55JXYdOBVMTPm7iTwv8r7zO1fBGG6dp1HHwGSYAGKKZKqqpYT1lFET5txHG6xfaIhQmYJF6PorzJi3008pfS1qsuCmmgmpqqOJe7iYracMqwAn2Rn4lM1SSURu1JHeK03wQ6S9feBacFFHOfWykmkpKyDW0NneMwxyIVu88X89jpwA7lmU75haEmagFMcuVQR6lrKOaGtZRSBZOHGRgW6iOXYmP9 / UdP / AxvdGfNkuS9vituMnBTS755JNHAfnkkUM22WSThQM7GWSQgQ0IIAQQfMwwzQ3GGOEC5 / Idy / hiXeb / AQDtquZeJxF4 YgAAAABJRU5ErkJggg ==); background-repeat: no-repeat; dimensioni dello sfondo: 30%; posizione di sfondo: centro; 

Forse l'elemento più eclatante che emerge qui è l'uso dell'URI dei dati per l'immagine di sfondo. Questo ci consente di evitare una richiesta HTTP aggiuntiva ed è sintatticamente sinonimo di utilizzare un URL http effettivo. Stiamo anche impostando questo elemento per essere posizionato assolutamente all'interno del suo elemento .widget, che abbiamo precedentemente impostato come posizione relativa.

Andiamo avanti e configuriamo la tipografia del widget. Usiamo solo gli elementi h3 e p all'interno del widget; ecco il css di accompagnamento.

.widget p margin-top: 0; allineamento del testo: centro;  .widget h3 margin: -12px 0 12px -12px; imbottitura: 12px; larghezza: 100%; allineamento del testo: centro; colore: # 627b86; line-height: 2em; sfondo: # d0dde3; 

Le regole relative al margine e al padding sull'elemento h3 consentono all'elemento di estendersi fino al bordo dell'elemento widget sopra il 12px del padding del widget. Abbiamo anche impostato il margine superiore su 0 sull'elemento p per adattarlo più vicino all'intestazione del widget.

Il grafico a linee

Una delle funzionalità più utili di ChartJS è che alcuni grafici consentono più set di dati. Questi set di dati verranno disegnati sullo stesso grafico in sequenza, consentendo di confrontare un set di dati con un altro. Un perfetto esempio di questo essere utile è nei grafici a linee. Utilizzeremo due dataset per esplorare questa funzionalità.

var data = labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], set di dati: [fillColor: "rgba (99,123,133,0.4)" , strokeColor: "rgba (220,220,220,1)", pointColor: "rgba (220,220,220,1)", pointStrokeColor: "#fff", dati: [65,54,30,81,56,55,40],  fillColor: "rgba (219,186,52,0.4)", strokeColor: "rgba (220,220,220,1)", pointColor: "rgba (220,220,220,1)", pointStrokeColor: "#fff", dati: [20,60,42 , 58,31,21,50],] var canvas = document.getElementById ("spedizioni"); var ctx = canvas.getContext ("2d"); new Chart (ctx) .Line (dati, opzioni);

Alcune cose da notare in questo nuovo codice: in primo luogo, stiamo riutilizzando le variabili che abbiamo usato per costruire il grafico a forma di ciambella. Questo è completamente valido in JavaScript e in realtà riduce leggermente la memoria utilizzata dallo script in generale. Tuttavia, ciò potrebbe causare confusione in futuro e, se si prevede di adattare questo codice per l'utilizzo in produzione, potrebbe essere più efficace utilizzare nuove variabili per ogni nuovo grafico creato.

Successivamente, il grafico a linee supporta le etichette. Questo è importante, in quanto ci consente di evitare la creazione di legende basate su HTML. Tuttavia, è anche importante che i punti di dati siano allineati con le etichette fornite. In questo esempio, il nostro primo punto dati nel primo set di dati, 65, corrisponde a "Mon" nelle etichette.

Infine, i nostri fillColors per questi set di dati sono versioni RGBa dei colori precedentemente definiti (blu scuro e giallo). Abbiamo trovato i valori RGB inserendo i colori nel selettore di colori di Photoshop, ma questo può essere fatto usando uno qualsiasi dei numerosi strumenti di colorpicker.

Aggiungiamo anche il markup per alcuni pulsanti e una gamma leggibile dall'uomo. Il widget html della linea finale ha il seguente aspetto.

Possiamo lucidare l'HTML in eccesso e aiutare gli utenti a connettere le date con il seguente CSS:

.widget.line p span color: # dbba34;  .widget.line p strong color: # 637b85; font-weight: 400; 

Grafico radar

I grafici radar sono utili per distillare una selezione di variabili in un grafico singolarmente leggibile per ottenere una percezione generale dell'interazione tra le diverse variabili. Nel nostro esempio, ad esempio, esploreremo l'idea del servizio clienti, in base al numero di volte in cui alcune parole chiave sono menzionate. Su un grafico radar, i punti tracciati creeranno una forma. Quella forma può darci un senso generale dell'efficacia del servizio clienti.

Vediamo come è stato creato! Ancora una volta, riutilizzeremo le nostre variabili da prima.

var data = labels: ["Helpful", "Friendly", "Kind", "Rude", "Slow", "Frustrating"], set di dati: [fillColor: "rgba (220,220,220,0.5)", strokeColor: " # 637b85 ", pointColor:" # dbba34 ", pointStrokeColor:" # 637b85 ", dati: [65,59,90,81,30,56]] var canvas = document.getElementById (" dipartimenti "); var ctx = canvas.getContext ("2d"); nuovo grafico (ctx) .Radar (dati, opzioni);

E l'HTML di accompagnamento sarà simile al seguente:

Intuitivamente, possiamo capire che una forma più in alto ea destra sarà migliore di una forma più in basso ea sinistra. Tuttavia, non perdiamo i dati specifici a nostra disposizione all'interno del grafico a livello granulare, a variabile singola. In questo caso, la parola "maleducato" viene spesso citata, ma il senso generale del servizio clienti sembra positivo in base ad altre parole chiave.

Rendendolo tutto reattivo

Abbiamo già impostato i nostri elementi canvas in modo da essere reattivi con il codice JavaScript utilizzato per rispondere al ridimensionamento delle finestre. Ora, dobbiamo rendere il nostro CSS reattivo usando le query multimediali. Ecco il css che useremo per fare questo.

@media solo schermo e (min-width: 300px) .container width: 300px; margine: 0 auto;  @media only screen e (min-width: 600px) .container width: 580px; margine: 0 auto;  .third float: left; larghezza: 47,5%; margin-left: 5%;  .third: first-child margin-left: 0;  .third: last-child display: block; larghezza: 100%; margin-left: 0;  @media only screen e (min-width: 960px) .container width: 940px;  .third float: left; larghezza: 30%; margin-left: 2,5%; margine-destra: 2,5%;  .third: first-child margin-left: 0;  .third: last-child margin-right: 0; margin-left: 2,5%; larghezza: 30%;  @media only screen e (min-width: 1140px) .container width: 1120px;  @media only screen e (min-width: 1360px) .container width: 1300px; 

La prima cosa da notare su questo CSS è che tutte le query multimediali sono basate solo sulla larghezza minima. Ciò significa che stiamo progettando dagli schermi di larghezza più bassa e aggiungendo nuove regole mentre ci spostiamo verso l'alto. Il nostro design non richiede molti cambiamenti ad ogni punto di rottura, ma questo modello è una best practice nei progetti di tutte le scale.

Possiamo vedere alcune modifiche di base del layout a ogni punto di interruzione, inclusa la larghezza dell'elemento contenitore primario e il nostro trattamento della classe .third, che usiamo su ciascuno dei widget. Sotto 400, raggruppiamo tutti i widget uno sopra l'altro. Tra 400 e 600, realizziamo le prime due colonne a mezza larghezza dei widget e il terzo widget (il grafico radar) a tutta larghezza. Infine, sopra il 960, usiamo tre colonne in linea.

Conclusione

Questo tutorial ti ha illustrato i passaggi fondamentali per la creazione di un dashboard utilizzando ChartJS. I concetti fondamentali qui descritti dovrebbero aiutarti a creare progetti più coinvolti usando ChartJS, e dovresti anche incoraggiarti a pensare al design reattivo dal punto di vista del bottom-up.

Quali esperienze hai avuto con le librerie di grafici? Usi SVG o canvas per tracciare i dati? Che cosa desideri che ChartJS faccia che non lo faccia? Aggiungi i tuoi commenti qui sotto!

Scopri JavaScript: la guida completa

Abbiamo creato una guida completa per aiutarti a imparare JavaScript, sia che tu stia appena iniziando come sviluppatore web o che desideri esplorare argomenti più avanzati.