Con CSS se puede maquetar una página web, desde la propia estructura de la página hasta elementos más específicos como una gráfica de barras. Como en el caso de este artículo, que utilizando posicionamiento CSS vamos a definir la colocación y el tamaño de elementos que nos pueden ayudar a construir una gráfica de barras. Utilizaremos capas para realizar las gráficas, una para el fondo de la gráfica y dentro de esta, otras capas para cada una de las barras.

Es decir, no vamos a utilizar ni imágenes ni tablas, sino simplemente etiquetas <div> a las que vamos a aplicarles posicionamiento y estilos para crear unas gráficas bastante vistosas.

Para no llevar a confusión, hay que aclarar que en este ejemplo no vamos a crear código especial para hacer un sistema de generación de gráficas de barras para páginas web. En lugar de ello, el objetivo es simplemente explicar el modo en el que podríamos maquetar una gráfica de barras con CSS y capas.

El ejemplo que vamos a construir se puede ver en una página aparte.

Grafica de barras CSS 1

Veamos una primera gráfica, que expresaría las visitas en un día de la semana a un supuesto sitio web. El código HTML sería este:

<div id=contenedor1 class=gris>
   <div id=titulo1>Visitas por día</div>
   <div id=grafica1 class=degradadoverde>
       <div id=lunes class=verde>Lunes 390</div>
       <div id=martes class=verde>Martes 423</div>
       <div id=miercoles class=verde>Miércoles 412</div>
       <div id=jueves class=verde>Jueves 459</div>
       <div id=viernes class=verde>Viernes 405</div>
       <div id=sabado class=verde>Sábado 320</div>
       <div id=domingo class=verde>Domingo 302</div>
   </div>
</div>

Como se puede observar, tenemos un <div>, o capa con un contenedor, donde se va a situar a su vez otro <div> con un título y otro para la gráfica de las barras. Tenemos dentro de la gráfica otras tantas capas, una para cada día de la semana.

El código CSS será el encargado de aplicar formato a estas capas para que se presenten como una gráfica de barras. Hemos combinado tanto los estilos con clases como los de identificadores. En las clases colocamos los estilos que son comunes y que podríamos repetir en varias capas y en los identificadores especificamos estilos propios exclusivos para la capa. Veamos primero los estilos de los identificadores.

El contenedor simplemente tiene definida posición relativa, una anchura y un espacio de margen con padding.

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

Dentro del contenedor tenemos el título, que simplemente define un tipo de letra y un margen.

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

Así mismo tenemos una capa con la gráfica. Esta capa es la que tiene anidadas a su vez otras 7 capas con las barras. En los estilos de la gráfica tenemos una anchura, un espaciado arriba y abajo y un formato de texto.

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

Ahora veremos cada una de las capas con los días de la semana. Lo importante es ver que cada capa tiene un ancho, que debe de ser proporcional al valor que se desea mostrar en la barra. En este caso hacemos corresponder la anchura de la capa con las visitas que se han obtenido ese día de la semana. El alto es siempre el mismo y el margen arriba y abajo también.

#lunes{
   width: 390px;
   height: 18px;
   margin: 5 0 5 0px;
}
#martes{
   width: 423px;
   height: 18px;
   margin: 5 0 5 0px;
}
#miercoles{
   width: 412px;
   height: 18px;
   margin: 5 0 5 0px;
}
#jueves{
   width: 459px;
   height: 18px;
   margin: 5 0 5 0px;
}
#viernes{
   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;
}

Ahora veamos los estilos que hemos colocado por medio de clases. Como decía, utilizamos las clases cuando tenemos estilos que podrían ser utilizados en otras capas. En este caso el color de fondo y el borde de las barras es el único estilo que es común a varias capas, porque lo tenemos igual en todas las barras. Sin embargo, el fondo gris del contenedor y el verde de la gráfica también lo sacamos a clases porque en la práctica se podría utilizar para aplicar estilos a otras gráficas.

Los estilos simplemente definen un color de fondo y unos bordes oscuros por la parte de abajo y la derecha y más claros por arriba y la izquierda, así se consigue un efecto de viselado.

.gris{
   background-color: #b5b5b5;
   border-bottom: 2px solid #6b6b6b;
   border-right: 2px solid #6b6b6b;
   border-top: 2px solid #f0f0f0;
   border-left: 2px solid #f0f0f0;
}
.morado{
   background-color: #a05aab;
   border-bottom: 2px solid #672770;
   border-right: 2px solid #672770;
   border-top: 2px solid #d090d9;
   border-left: 2px solid #d090d9;
}
.degradadoverde{
   background-color: #e1e455;
   background-image: url('images/degradado-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 se ha podido ver, en la clase degradadoverde se ha definido además una imagen de fondo con un degradado, para mejorar un poco el diseño de la gráfica haciéndolo menos plano. Se utiliza el atributo background-repeat: repeat-x; para que el fondo se repita sólo por la coordenada de la x.

Podemos ver el ejemplo en marcha en una página aparte.

Esto es todo. Hemos dejado para un artículo posterior otra gráfica un poco más elaborada, con más colores y más detalles como una leyenda. Seguiremos entonces trabajando la maquetación de gráficas de barras con posicionamiento CSS.