Construa um Gráfico de Barras com CSS
Construa um Gráfico de Barras com CSS
Nem toda visualização precisa de uma biblioteca de gráficos pesada. Para muitos dashboards, algumas divs estilizadas formam um gráfico de barras nítido, rápido de carregar e totalmente sob o seu controle.
Nesta lição você vai construir um gráfico de barras vertical com HTML puro e Tailwind. Cada barra é apenas uma div colorida cuja altura corresponde ao seu valor, e uma legenda liga as cores ao seu significado.
Como analista, essa técnica vale ouro: você pode inserir um gráfico limpo em qualquer relatório sem dependências, entendendo exatamente como cada pixel se relaciona com os seus dados. Vamos desenhar algumas barras.
Instruções
Adicione um título h1 "Receita Trimestral" para que quem vê saiba o que as barras representam.
Dica: Use: `<h1 class="text-3xl font-bold mb-2">Receita Trimestral</h1>`.
Onde é que isto entra?
<!-- Construa aqui a sua visualização de gráfico de barras -->Escreva na linha 11 — abaixo desse comentário, depois do código que já adicionou.
Crie a área de plotagem do gráfico como uma linha flex cujas barras se apoiam em uma linha de base usando items-end.
Adicione barras coloridas como divs com um estilo de altura inline, usando a cor bg-purple-500.
Adicione uma legenda que explique as cores, incluindo o rótulo "Trimestre recorde".
Seu Código
Descreva o que você quer construir para esta etapa e eu escrevo o código — depois clique em Aplicar para inseri-lo no seu editor. Esta etapa: Adicione um título h1 "Receita Trimestral" para que quem vê saiba o que as barras representam.