Criação de gráficos de barras com CSS para a construção

[helldanger1]

Neste artigo vamos criar uns gráficos de barras construídas inteiramente com CSS. Utilizamos camadas e posicionamento CSS para criar o gráfico.
Por Miguel Angel Alvarez - Tradução de JML



Com CSS pode-se construir uma página web, através da própria estrutura da página até elementos mais específicos como um gráfico de barras. Como no caso deste artigo, que utilizando posicionamento CSS vamos definir a colocação e o tamanho de elementos que podem nos ajudar a construir um gráfico de barras. Utilizaremos camadas para realizar os gráficos, uma para o fundo do gráfico e dentro deste, outras camadas para cada uma das barras.

Ou seja, não vamos utilizar nem imagens nem tabelas, e sim simplesmente etiquetas
as quais lhes aplicaremos posicionamento e estilos para criar uns gráficos bastante vistosos.

Para não ter confusão, há que aclarar que neste exemplo não vamos criar um código especial para fazer um sistema de geração de gráficos de barras para páginas web. Ao invés disso, o objetivo é simplesmente explicar o modo no qual poderíamos construir um gráfico de barras com CSS e camadas.

 

[helldanger1]

Gráfico de barras CSS 1

Vejamos um primeiro gráfico, que expressaria as visitas em um dia da semana a um suposto website. O código HTML seria este:

<div id=container1 class=gris>
<div id=titulo1>Visitas por dia</div>
<div id=grafica1 class=degradeverde>
<div id=segunda-feira class=verde> Segunda-feira 390</div>
<div id=terça-feira class=verde> Terça-feira 423</div>
<div id=quarta-feira class=verde> Quarta-feira 412</div>
<div id=quinta-feira class=verde> Quinta-feira 459</div>
<div id=sexta-feira class=verde> Sexta-feira 405</div>
<div id=sabado class=verde>Sábado 320</div>
<div id=domingo class=verde>Domingo 302</div>
</div>
</div>

Como se pode observar, temos um <div>, ou camada com um container, onde vai se situar por sua vez <div> com um título e outro para o gráfico das barras. Temos dentro do gráfico outras tantas camadas, uma para cada dia da semana.

O código CSS será o encarregado de aplicar formato a estas camadas para que se apresentem como um gráfico de barras. Combinamos tanto os estilos com classes como os de identificadores. Nas classes colocamos os estilos que são comuns e que poderíamos repetir em várias camadas e nos identificadores especificamos estilos próprios exclusivos para a camada. Vejamos primeiro os estilos dos identificadores.

O container simplesmente tem definido uma posição relativa, uma largura e um espaço de margem com padding.

#container1{
position: relative;
padding:5px;
width: 524px;
}

 

[helldanger1]

Dentro do container temos o título, que simplesmente define um tipo de letra e uma margem.

#titulo1{
font: bold 10pt Verdana, Tahoma, Arial;
margin:2 0 5 0px;
}

Ainda assim temos uma camada com o gráfico. Esta camada é a que têm adicionadas em sua vez outras 7 camadas com as barras. Nos estilos do gráfico temos uma largura, um espaçamento acima e abaixo e um formato de texto.

#grafico1 {
width: 500px;
padding:10 0 10 0px;
font: bold 8pt Verdana, Tahoma, Arial;
}

Agora veremos cada uma das camadas com os dias da semana. O importante é ver que cada camada tem uma largura, que deve de ser proporcional ao valor que se deseja mostrar na barra. Neste caso fazemos corresponder a largura da camada com as visitas que foi obtido neste dia da semana. A altura é sempre a mesma e a margem acima e abaixo também.

#segunda-feira{
width: 390px;
height: 18px;
margin: 5 0 5 0px;
}
#terça-feira{
width: 423px;
height: 18px;
margin: 5 0 5 0px;
}
#quarta-feira{
width: 412px;
height: 18px;
margin: 5 0 5 0px;
}
#quinta-feira{
width: 459px;
height: 18px;
margin: 5 0 5 0px;
}
#sexta-feira{
width: 405px;
height: 18px;
margin: 5 0 5 0px;
}
#sabado{
width: 320px;
height: 18px;
margin: 5 0 5 0px;
}
#domingo{
width: 302px;
height: 18px;
margin: 5 0 5 0px;
}

 

[helldanger1]

Agora vejamos os estilos que colocamos por meio de classes. Como dizia, utilizamos as classes quando temos estilos que poderiam ser utilizados em outras capas. Neste caso a cor de fundo e a borda das barras são o único estilo que é comum a várias camadas, porque o temos igual em todas as barras. Entretanto, também tiramos às classes do fundo cinza do container e do verde do gráfico porque na prática poderia ser utilizado para aplicar estilos em outros gráficos.

Os estilos simplesmente definem uma cor de fundo e umas bordas escuras pela parte debaixo e à direita e mais claros por encima e à esquerda, assim se consegue um efeito degrade.

.cinza{
background-color: #b5b5b5;
border-bottom: 2px solid #6b6b6b;
border-right: 2px solid #6b6b6b;
border-top: 2px solid #f0f0f0;
border-left: 2px solid #f0f0f0;
}
.roxo{
background-color: #a05aab;
border-bottom: 2px solid #672770;
border-right: 2px solid #672770;
border-top: 2px solid #d090d9;
border-left: 2px solid #d090d9;
}
.degradeverde{
background-color: #e1e455;
background-image: url('images/degrade-verde.jpg');
background-repeat: repeat-x;
border-bottom: 2px solid #6f722d;
border-right: 2px solid #6f722d;
border-top: 2px solid #ece996;
border-left: 2px solid #ece996;
}

Como pode ser visto, na classe degradeverde foi definido ainda uma imagem de fundo com um degrade, para melhorar o desenho do gráfico fazendo-o menos plano. Utiliza-se o atributo background-repeat: repeat-x; para que o fundo se repita só pela coordenada da x.


Isto é tudo. Deixaremos para um artigo posterior outro gráfico um pouco mais elaborado, com mais cores e mais detalhes como uma legenda. Continuaremos então trabalhando na construção de gráficos de barras com posicionamento CSS.