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"> </div></td>
<td valign="bottom"><div class="barrasv" style="height:43.5px; background-color:#FF9A68"> </div></td>
<td valign="bottom"><div class="barrasv" style="height:15.8px; background-color:#69ABBF"> </div></td>
<td valign="bottom"><div class="barrasv" style="height:1.9px; background-color:#FFDE68"> </div></td>
<td valign="bottom"><div class="barrasv" style="height:6.9px; background-color:#AB6487"> </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.