Grafica de barras con CSS, parte 2

  • Por
  • CSS
Hacemos una gráfica de barras CSS más elaborada, con capas y maquetación posicionamiento CSS.
El posicionamiento CSS nos sirve para crear elementos complejos en páginas web, como podría ser una gráfica de barras. En el artículo anterior del taller de CSS aprendimos a realizar una maquetación de una gráfica de barras con CSS.

Vamos a utilizar un HTML en el que tenemos unas simples capas y con CSS definiremos sus estilos y posicionamiento, de modo que obtengamos un diseño para realizar una atractiva gráfica de barras, separando por completo el aspecto del contenido.

Veamos el ejemplo en una página aparte para hacernos una idea.

En este artículo veremos cómo realizar la segunda gráfica del ejemplo, la de abajo, que es un poco más elaborada, al contar varios colores para las barras y una leyenda.

El código HTML para la gráfica

<div id=contenedor2 class=gris>
       <div id=titulo2>Buscadores referidos</div>
   <div id=grafica2 class=degradadoverde>
       <div id=google class=azul></div>
    <div id=direct class=verde></div>
       <div id=msn class=rojo></div>
       <div id=yahoo class=morado></div>
   </div>
   <div id=leyenda>
       <ul>
       <li class=azul>Google</li>
       <li class=verde>Directo</li>
       <li class=rojo>MSN</li>
       <li class=morado>Yahoo</li>
       </ul>
   </div>
</div>

Como la gráfica del artículo anterior, tenemos un contenedor que tiene dentro todos los elementos de la gráfica: El título, la gráfica con las barras y la leyenda.

El título es una simple capa con texto. La gráfica es otra capa que contiene otras capas con cada una de las barras. Por último, la leyenda, que está dentro de otra capa, tiene una lista con los distintos elementos que se muestran en la grafica.

Veamos los estilos para cada elemento, divididos entre clases e identificadores. Las clases para los estilos comunes a varios elementos y los identificadores con los estilos propios de cada capa. Veamos ahora los estilos para los identificadores.

El contenedor tiene un posicionamiento, un tamaño y un espaciado.

#contenedor2{
   position: relative;
   padding:5px;
   width: 280px;
}

El título tiene una tipografía y un margen.

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

La gráfica tiene dentro unas dimensiones y un espaciado a la izquierda.

#grafica2 {
   width: 250px;
   height: 100px;
   padding-left:20px;
   position: relative;
}

Luego, para cada una de las barras tenemos un posicionamiento absoluto, para colocarlas dentro de la gráfica. Como esta capa está dentro de la gráfica, la posición absoluta corresponde a la posición que ocupará la barra dentro de la capa de la gráfica.

#google{
   width: 190px;
   height: 30px;
   position:absolute;
   left:0px;
   top:10px;
}
#direct{
   width: 80px;
   height: 30px;
   position:absolute;
   left:0px;
   top:25px;
}
#msn{
   width: 35px;
   height: 30px;
   position:absolute;
   left:0px;
   top:40px;
}
#yahoo{
   width: 25px;
   height: 30px;
   position:absolute;
   left:0px;
   top:55px;
}

Como se puede ver, cada barra tiene una anchura que corresponde con el valor que se quiere representar.

Para la leyenda se han de definir estilos tanto para la capa de la leyenda como para la lista que contiene.

#leyenda{
   position: relative;
   text-align:center;
}
#leyenda ul{
   margin:10 0 10 0px;
   padding: 0px;
}
#leyenda li{
   display:inline;
   font: bold 8pt Verdana, Tahoma, Arial;
   height: 10pt;
   margin: 2px;
   padding: 2px;
}

Lo más destacable de la lista es que tiene el display inline, que hará que se muestren todos los elementos en una línea, en lugar de ocupar un elemento por línea de texto.

Terminamos viendo las clases, que contienen los colores de fondo y borde de las capas. Como cada barra tiene su color, cada una tiene una clase distinta, que utilizamos también como estilo en la leyenda. Además, tanto el contenedor como la gráfica en si tienen un estilo personalizado, que ya utilizamos y comentamos en el ejercicio anterior, con una gráfica de barras más sencilla.

.azul{
   background-color: #9190a8;
   border-bottom: 2px solid #535270;
   border-right: 2px solid #535270;
   border-top: 2px solid #cbcbda;
   border-left: 2px solid #cbcbda;
}

.rojo{
   background-color: #c47965;
   border-bottom: 2px solid #67382c;
   border-right: 2px solid #67382c;
   border-top: 2px solid #e1a494;
   border-left: 2px solid #e1a494;
}
.verde{
   background-color: #5aae4c;
   border-bottom: 2px solid #357d2a;
   border-right: 2px solid #357d2a;
   border-top: 2px solid #aceaa2;
   border-left: 2px solid #aceaa2;
}
.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;
}

Simplemente se debe notar que se utiliza un color de fondo y unos bordes para crear un efecto de viselado. En la clase que da color a la gráfica, llamada degradadoverde, hemos utilizado además una imagen de fondo.

Podemos ver el ejemplo en una página aparte.

Con esto hemos visto como crear gráficas de barras solamente con estilos CSS y unas cuantas capas. Las posibilidades son mucho mayores si se desea emplear un poco de tiempo y creatividad para mejorar los ejemplos presentes y hacerlos más variados.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Rafa

19/10/2006
Hola,
el artículo me parece fantástico y muy útil.Ppero se me plantea una duda. En el caso de que los datos numéricos se obtengan dinámicamente (desde una base de datos, por ejemplo) como se podría indicar el ancho de las barras?, tal y como esta realizado esto no se podrían modificar los atributos CSS relacionados con la anchura, no? Alguna solución al respecto?
gracias y saludos

Lolo

06/11/2006
Estoy en ello y mi enfoque va a ser el siguiente:
Se introducen unos valores en un formulario, paso los valores por la URL, realizo los cálculos para obtener los valores de las barras. Y dependiendo del tamaño que quiera que me ocupe el gráfico realizo la conversión de los valores a los pixels de longitud de las barras. Por ejemplo si el tamaño máximo de una barra es 300px y mi valor máximo es 550 uds, asignaré a este valor la longitud de 300px. Para obtener las longitudes de las demás barras tan solo falta implementar la lógica de una regla de 3 (si 550uds son 300px cuanto será x).
Bueno si lo consigo ya lo pondré aquí, un saludo a todos

Andres

05/12/2007
Oye una pregunta, como relaciono los valores de la grafica con los resultados de SQLdatasource o con un griview, una tabla, no se, pero es que hago una consulta en el sqldata... y con esos valores kiero ke la grafica se forme, no se como asignar las variables a los valores de las graficas, realmente soy nuevo en esto,ojala puedas ayudarme, te agradezco mucho el favor de tu atencion, gracias.