Necesitais hacer graficos de barras para vuestro blog ? Pues con CSS lo tenemos fácil!
Os mostraré como genera diferentes tipos de graficos de barras.
1. Grafico de barras simple
Código CSS:
[css]
.grafico {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.grafico .barra {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.grafico .barra span {
position: absolute; left: 1em;
}[/css]
Y este es el código html.
Creamos un «div» con la clase «grafico» y dentro del «div grafico» la barra. Así de sencillo!
[html]
<div class="grafico"><strong class="barra" style="width: 24%;">24%</strong></div>
[/html]
Ver los resultados de los graficos.
2. Grafico de barras complejo
Código CSS:
[css]
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;
}[/css]
Y este es el código html.
[html]
<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>
[/html]
3. Grafico de barras vertical
Código CSS:
[css]
#vertgraph {
width: 378px;
height: 207px;
position: relative;
background: url("g_backbar.gif") no-repeat;
}
#vertgraph ul {
width: 378px;
height: 207px;
margin: 0;
padding: 0;
}
#vertgraph ul li {
position: absolute;
width: 28px;
height: 160px;
bottom: 34px;
padding: 0 !important;
margin: 0 !important;
background: url("g_colorbar3.jpg") no-repeat !important;
text-align: center;
font-weight: bold;
color: white;
line-height: 2.5em;
}
#vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
#vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
#vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
#vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
#vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
[/css]
Y este es el código html.
[html]
<div id="vertgraph">
<ul>
<li class="critical" style="height: 150px;">22</li>
<li class="high" style="height: 80px;">7</li>
<li class="medium" style="height: 50px;">3</li>
<li class="low" style="height: 90px;">8</li>
<li class="info" style="height: 40px;">2</li>
</ul>
</div>
[/html]
4 comentarios
Jhonatan Plata
Muchas gracias, la verdad me sirvio mucho para graficar unas encuestas con asp. Excelente, Dios te bendiga.
Ulberto
Hola amigo, antes te agradesco las muy buenas intenciones, recien empiezo en esto, me llevas un poquillo de ventaja por no decir mucho, hombre yo tengo en esto exactamente 1 año; SOBRE GRAFICOS deseo intercalar información de valores estadisticos en que la resultante de la sumatoria de valores; por ejemplo costos sobre mantenimientos se acopien mediante una base de datos, al ser recibidos en automatico genere una grafica de valores acumulados; si me has entendido o no me lo dices para ser más especifico sobre este proyecto que estoy en vías de desarrollarlo poco a poco; y muchas gracias.
tiobuenow
Gracias, por compartirlo.
Eh agregado un enlace de la noticia hacia tu blog.
Espero , que sigas asi.
Ya que me interesa también , los temas de css , etc..
Si quieres puedes visitarme , acabo de empezar, hace unos meses.
Si te interesa un tema , no duces en enlazarme.
puedes ver la noticia,
aqui
Pkdisseny
Hola «Tiobuenow» espero que vaya todo bien en tu blog! y animo con los css… es todo un mundillo !