Costruisci un grafico a barre in CSS
Costruisci un grafico a barre in CSS
Non tutte le visualizzazioni hanno bisogno di una libreria di grafici pesante. Per molte dashboard, pochi div stilizzati creano un grafico a barre nitido, velocissimo da caricare e completamente sotto il tuo controllo.
In questa lezione costruirai un grafico a barre verticale con HTML puro e Tailwind. Ogni barra è solo un div colorato con un'altezza proporzionale al suo valore, e una legenda collega i colori al loro significato.
Per un analista questa tecnica vale oro: puoi inserire un grafico pulito in qualsiasi report senza dipendenze, e sai esattamente come ogni pixel corrisponde ai tuoi dati. Disegniamo qualche barra.
Istruzioni
Aggiungi un titolo h1 "Ricavi trimestrali" così chi guarda sa cosa rappresentano le barre.
Suggerimento: Usa: `<h1 class="text-3xl font-bold mb-2">Ricavi trimestrali</h1>`.
Dove va scritto?
<!-- Costruisci qui la tua visualizzazione a barre -->Scrivilo alla riga 11: sotto quel commento, dopo il codice che hai già aggiunto.
Crea l'area del grafico come riga flex le cui barre poggiano su una linea di base usando items-end.
Aggiungi barre colorate come div con uno stile height inline, usando il colore bg-purple-500.
Aggiungi una legenda che spieghi i colori, inclusa l'etichetta "Trimestre record".
Il tuo codice
Descrivi ciò che vuoi creare per questo passaggio e scriverò il codice — poi clicca su Applica per inserirlo nel tuo editor. Questo passaggio: Aggiungi un titolo h1 "Ricavi trimestrali" così chi guarda sa cosa rappresentano le barre.