Construye un Gráfico de Barras con CSS
Construye un Gráfico de Barras con CSS
No toda visualización necesita una librería de gráficos pesada. En muchos paneles de control, unos pocos divs con estilo crean un gráfico de barras nítido, de carga rápida y totalmente bajo tu control.
En esta lección construirás un gráfico de barras vertical con HTML simple y Tailwind. Cada barra es simplemente un div de color cuya altura se corresponde con su valor, y una leyenda vincula los colores con su significado.
Como analista, esta técnica es oro puro: puedes insertar un gráfico limpio en cualquier informe sin dependencias, y entiendes exactamente cómo cada píxel se corresponde con tus datos. ¡Vamos a dibujar algunas barras!
Instrucciones
Añade un título h1 al gráfico «Quarterly Revenue» para que los espectadores sepan qué representan las barras.
Pista: Usa: `<h1 class="text-3xl font-bold mb-2">Quarterly Revenue</h1>`.
¿Dónde va esto?
<!-- Build your bar chart visualization here -->Escríbelo en la línea 11: debajo de ese comentario, después del código que ya añadiste.
Crea el área del gráfico como una fila flex donde las barras se apoyan en una línea base usando items-end.
Añade barras de colores como divs con un estilo de altura en línea, usando el color bg-purple-500.
Añade una leyenda que explique los colores, incluyendo la etiqueta «Record quarter».
Tu código
Describe lo que quieres construir para este paso y escribiré el código — luego haz clic en Aplicar para llevarlo a tu editor. Este paso: Añade un título h1 al gráfico «Quarterly Revenue» para que los espectadores sepan qué representan las barras.