Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/05/2012, 11:15
Ryan7777
 
Fecha de Ingreso: enero-2010
Mensajes: 16
Antigüedad: 12 años, 6 meses
Puntos: 2
Sonrisa Grafico de Barras Verticales

Buen Dia!

Luchando he conseguido hacer un grafico de barras verticales decente con el siguiente codigo:

Código HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
table {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color:#777;
	padding:7px;
}
.barrasv {
	width:30px;
	text-shadow:#CCC 0.1em 0.1em 0.1em;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow:1px 1px 1px black;
	-webkit-box-shadow:1px 1px 1px black;
	-moz-box-shadow:1px 1px 1px black
}
.verticalmente {
	position:absolute;
	height:100px;
	width:100px;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	writing-mode:tb-rl;
	filter:flipv fliph;
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="2" cellspacing="2" border="0">
  <tbody align="center">
    <tr>
	<td valign="bottom"><div class="barrasv" style="height:31.6px; background-color:#BDDA4C">&nbsp;</div></td>
	<td valign="bottom"><div class="barrasv" style="height:43.5px; background-color:#FF9A68">&nbsp;</div></td>
	<td valign="bottom"><div class="barrasv" style="height:15.8px; background-color:#69ABBF">&nbsp;</div></td>
	<td valign="bottom"><div class="barrasv" style="height:1.9px; background-color:#FFDE68">&nbsp;</div></td>
	<td valign="bottom"><div class="barrasv" style="height:6.9px; background-color:#AB6487">&nbsp;</div></td>
    </tr>
    <tr>
	<td>31.6%</td>
	<td>43.5%</td>
	<td>15.8%</td>
	<td>1.9%</td>
	<td>6.9%</td>
    </tr>
    <tr>
	<td><strong><div class="verticalmente">Productos Varios</div></strong></td>
	<td><strong><div class="verticalmente">Repuestos de Vehiculos</div></strong></td>
	<td><strong><div class="verticalmente">Enceres</div></strong></td>
	<td><strong><div class="verticalmente">Bienes Muebles</div></strong></td>
	<td><strong><div class="verticalmente">Bienes Inmuebles</div></strong></td>
    </tr>
  </tbody>
</table>
</body>
</html> 
El problema es que las etiquetas de los datos no se ven centradas con respecto a la grafica, tambien si la etiqueta es corta se ve como centrada en top, por favor una ayuda para resolver este rollo de alineacion.

NOTA:

- La solucion debe ser para html y css no deseo usar librerias de imagenes para hacer el grafico.
- Esta probado de IE6 y superiores, Chrome y Firefox.

Última edición por Ryan7777; 25/05/2012 a las 12:46