lms
Administrador
- Mensajes
- 7.741
- Puntuación de reacciones
- 2.163
- Puntos
- 2.613
- Sitio web
- xenfacil.com
- País
-
- Versión de XenForo
- 2.1.x
- PayPal
-
- Página web
- Web
Tener un conocimiento práctico de XHTML y CSS en el desarrollo de aplicaciones es de gran ayuda para saber qué se puede hacer del lado del cliente y lo que se debe generar en el servidor.
Recientemente hemos tenido que hacer frente a algunas visualizaciones interesantes codificadas en XHTML y CSS. El método utilizado, bastante simple, fue de gran ingeniero y ha creado una solución muy flexible y de bajo costo. Pensamos en compartir nuestra solución y su código para cuando alguien se halle en una situación similar.
Gráficos de barras básicos en CSS
Este es un gráfico de barras simple desarrollado como una herramienta que se lanza desde el lado cliente. El concepto es simple, utilizar las capacidades de CSS ancho (porcentaje) para retratar con precisión un gráfico de barras de porcentaje.
Gráficos de barra complejos en CSS
Esta es una visualización más compleja y con la misma idea básica. Aquí el gráfico es un indicador 'malo' a 'mejor' con un marcador que viaja a lo largo de la combinación de colores. Una sombra más clara en la barra también ayuda a indicar la posición del marcador a medida que viaja de izquierda a derecha.
Fuente: http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55
Salud2
Recientemente hemos tenido que hacer frente a algunas visualizaciones interesantes codificadas en XHTML y CSS. El método utilizado, bastante simple, fue de gran ingeniero y ha creado una solución muy flexible y de bajo costo. Pensamos en compartir nuestra solución y su código para cuando alguien se halle en una situación similar.
Gráficos de barras básicos en CSS
Este es un gráfico de barras simple desarrollado como una herramienta que se lanza desde el lado cliente. El concepto es simple, utilizar las capacidades de CSS ancho (porcentaje) para retratar con precisión un gráfico de barras de porcentaje.
Rich (BB code):
<style>
.graph { position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span {
position: absolute;
left: 1em;
}
</style>
<div class="graph">
<strong class="bar" style="width: 25%;">25%</strong>
</div>Esta es una visualización más compleja y con la misma idea básica. Aquí el gráfico es un indicador 'malo' a 'mejor' con un marcador que viaja a lo largo de la combinación de colores. Una sombra más clara en la barra también ayuda a indicar la posición del marcador a medida que viaja de izquierda a derecha.
Rich (BB code):
<style>
dl {
margin: 0;
padding: 0;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background: url("g_colorbar.jpg");
}
* html dd {
float: none;
} /* IE is dumb; Quick IE hack, apply favorite filter methods for wider browser compatibility */
dd div {
position: relative;
background: url("g_colorbar2.jpg");
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url("g_marker.gif");
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}
</style>
<dl>
<dt>Love Life</dt>
<dd> <div style="width:25%;"><strong>25%</strong></div> </dd> <dt>Education</dt>
<dd> <div style="width:55%;"><strong>55%</strong></div> </dd> <dt>War Craft 3 Rank</dt> <dd>
<div style="width:75%;"><strong>75%</strong></div>
</dd>
</dl>Fuente: http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55
Salud2
, ya veo de deje la cagada metiendo manos...