Gráficos de barra com CSS

Postado por: Pedro Rogério em

Gráficos de barra com CSS

Criar gráficos de barra não exige conhecimento afinado em PHP, JavaScript ou XML. Você pode simplesmente implementar uma solução simples com HTML e CSS. Com uma simples técnica, você pode montar uma tabela que ilustra todos os dados em formato de barras.

HTML

Nosso HTML se resume ao seguinte:

<div id="graphbox">
    <h2>JavaScript Frameworks</h2>
    <div class="graph"><strong class="orangebar" style="width: 55%;">Prototype: 55%</strong></div>
    <div class="graph"><strong class="greenbar" style="width: 90%;">jQuery: 90%</strong></div>
    <div class="graph"><strong class="bluebar" style="width: 75%;">Script.aculo.us: 75%</strong></div>
    <div class="graph"><strong class="orangebar" style="width: 33%;">Dojo: 33%</strong></div>
    <div class="graph"><strong class="greenbar" style="width: 98%;">Mootools: 98%</strong></div>
    <div class="graph"><strong class="greenbar" style="width: 85%;">Mochikit: 85%</strong></div>
</div>

CSS

#graphbox {
	border:1px solid #e7e7e7;
	padding:20px 20px;
	width:400px;
	background-color:#f8f8f8;
}
#graphbox h2{
	color:#666666;
	font-family:Arial, sans-serif;
	font-size:1.1em;
	padding-bottom:0.3em;
	font-weight:bold;
	text-align:center;
}
#graphbox p {
	color:#888888;
	font-family:Arial, sans-serif;
	font-size:0.8em;
	padding-top: 0.3em;
	text-align:left;
}
.graph {
	background-color: #F0EFEF;
	border:1px solid #cccccc;
	padding:2px 2px;
}
.graph .orangebar, .graph .greenbar, .graph .bluebar {
	text-align:left;
	color:#ffffff;
	height:1.8em;
	line-height:1.8em;
	font-family:Arial, sans-serif;
	display:block;
}
.graph .orangebar {
	background-color:#ff6600;
}
.graph .greenbar {
	background-color:#66CC33;
}
.graph .bluebar {
	background-color:#3399CC;
}

Vamos a explicação do CSS utilizado para gerar o gráfico: Primeiro definimos uma largura total para a área do gráfico, que no exemplo foi de 400px. Após criamos as divs que conterão as nossas barras para que ao definirmos as larguras em porcentagem, elas não ultrapassem os limites do box. Vejam o exemplo.

Esse tutorial é uma livre tradução do original de: Impress Lab.

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

Sobre Pedro Rogério

Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.

5 Responses to “Gráficos de barra com CSS”

  1. Alessandro Santos

    Boa idéia!

    Me diz uma coisa: você já tentou fazer esse tipo de gráfico com SVG? Fica show de bola! Pena que nem todos os navegadores são compatíveis =/

  2. rafael veloso

    Muito bom!!! uma das coisas mais importantes não é saber fazer o gráfico e sim onde encontrar ehehhehe…Nosso amigo Pedro ai nos mostrando o caminho das pedras ne… Valeu cara.

    t+

  3. claudio

    e se o gráfico só tiver 1%, como ele seria representado? sacaste? se a barra tiver que ser menor que o texto.

  4. @Cláudio,

    Dê uma olhada como fica:

    http://www.cssnolanche.com.br/uploads/graficos/graph1.png

    Infelizmente destrói o texto, nesse caso seria interessante mostrar o texto de uma outra forma.

  5. Parabéns pelo artigo Pedro Rogério, um ótimo tutorial, simples, direto e funcional.

Leave a Reply