Ver Mensaje Individual
  #5 (permalink)  
Antiguo 26/05/2012, 22:41
Ryan7777
 
Fecha de Ingreso: enero-2010
Mensajes: 16
Antigüedad: 12 años, 7 meses
Puntos: 2
Respuesta: Grafico de Barras Verticales

Esta bien lo de resaltar con los colores, esto me dio una idea de la solucion acotar tambien que no uso Canvas y VML por el tema de la compatibilidad entre navegadores, quiero hacer algo mas estandar que se vea bien en los navegadores antiguos, he probado en IE7, Firefox, Chrome y se ve bien, hay que testear en IE6.

Acerca de los valores creo no haberme explicado bien, la idea es que los valores de la barra salgan encima de cada barra (no los porcentuales), ahora bien hay valores porcentuales que salen debajo de la barra y eso esta bien ¿Me explico? esa seria una gran mejora como dices.

------------------------------------------------------------------------------------------------------

Bueno edito porque ya consegui que salieran los valores encima de la barra, ademas le he agregado bordes arriba y abajo de donde salen los valores porcentuales, ojo que los valores son solo de ejemplos por poner algun numero, asi se ve el grafico por ahora:

En Firefox 12


En Chrome 18


En IE 7


Código HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
table {
	font:11px/120% Verdana, Arial, Helvetica, sans-serif;
	color:#777777;
	
}
.barrasv {
	width:2.5em;
	text-shadow:#CCCCCC 0.1em 0.1em 0.1em;
	border-radius:5px;
	-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;
	margin-bottom:1px;
}
.verticalmente {
	position:relative; 
	transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-ms-filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	writing-mode:tb-rl;
	filter:flipv fliph;
	margin:0 -1em;
}
#etiq td {
	height:7em;
	width:3em;
	font-weight:bold;
}
.bordetd {
	border-top: 1px solid #777777;
	border-bottom: 1px solid #777777;
	margin-left: 1px;
	margin-right: 1px;
	padding-top:1px;
	padding-bottom:1px;
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="0" cellspacing="0" border="0">
  <tbody align="center">
    <tr>
	  <td valign="bottom"><div style="vertical-align:text-top">25</div><div class="barrasv" style="height:31.6px; background-color:#BDDA4C">&nbsp;</div></td>
	  <td valign="bottom"><div style="vertical-align:text-top">40</div><div class="barrasv" style="height:43.5px; background-color:#FF9A68">&nbsp;</div></td>
	  <td valign="bottom"><div style="vertical-align:text-top">15</div><div class="barrasv" style="height:15.8px; background-color:#69ABBF">&nbsp;</div></td>
	  <td valign="bottom"><div style="vertical-align:text-top">2</div><div class="barrasv" style="height:1.9px; background-color:#FFDE68">&nbsp;</div></td>
	  <td valign="bottom"><div style="vertical-align:text-top">7</div><div class="barrasv" style="height:6.9px; background-color:#AB6487">&nbsp;</div></td>
    </tr>
    <tr>
	  <td class="bordetd">31.6%</td>
	  <td class="bordetd">43.5%</td>
	  <td class="bordetd">15.8%</td>
	  <td class="bordetd">1.9%</td>
	  <td class="bordetd">6.9%</td>
    </tr>
    <tr id="etiq">
	  <td><div class="verticalmente">Productos Varios</div></td>
	  <td><div class="verticalmente">Repuestos de Vehculos</div></td>
	  <td><div class="verticalmente">Enceres</div></td>
	  <td><div class="verticalmente">Bienes Muebles</div></td>
	  <td><div class="verticalmente">Bienes Inmuebles</div></td>
    </tr>
  </tbody>
</table>
</body>
</html> 
Como ves en IE se ven muy pegados los porcentajes, seria bueno arreglarle los detalles, sin embargo creo que hemos logrado un buen trabajo.

Última edición por Ryan7777; 27/05/2012 a las 00:00