|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
Home > DHTML > Ponga un gráfico en su vida > 1 - 2 - 3 - 4 - 5 - 6 - 7
PONGA UN GRÁFICO EN SU VIDA (VII)
por Luciano Moreno, del departamento de diseño web de BJS
Software.
Gráfico de columnas. (continuación II)-
El código final para nuestra página queda:
<html>
<head>
<title>Gráfico de
bandas</title>
<style type="text/css">
#caja
{position:absolute;top:50px;left:50px;width:380px;height:300px;background-color:#ffcc66;}
#barra1{position:absolute;top:260px;left:60px;width:30px;height:0px;background-color:red;}
#barra2{position:absolute;top:260px;left:100px;width:30px;height:0px;background-color:blue;}
#barra3{position:absolute;top:260px;left:140px;width:30px;height:0px;background-color:red;}
#barra4{position:absolute;top:260px;left:180px;width:30px;height:0px;background-color:blue;}
#barra5{position:absolute;top:260px;left:220px;width:30px;height:0px;background-color:red;}
#barra6{position:absolute;top:260px;left:260px;width:30px;height:0px;background-color:blue;}
#barra7{position:absolute;top:260px;left:300px;width:30px;height:0px;background-color:red;}
#titulo1{position:absolute;top:260px;left:60px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#titulo2{position:absolute;top:260px;left:100px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#titulo3{position:absolute;top:260px;left:140px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#titulo4{position:absolute;top:260px;left:180px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#titulo5{position:absolute;top:260px;left:220px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#titulo6{position:absolute;top:260px;left:260px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#titulo7{position:absolute;top:260px;left:300px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#pie1{position:absolute;top:260px;left:60px;width:40px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie2{position:absolute;top:260px;left:90px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie3{position:absolute;top:260px;left:130px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie4{position:absolute;top:260px;left:170px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie5{position:absolute;top:260px;left:210px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie6{position:absolute;top:260px;left:250px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie7{position:absolute;top:260px;left:290px;width:40px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
</style>
<script language="JavaScript" type="text/javascript">
//n=nº barras
var
n=4;
//array h = alturas de las barras
var
h=new Array(n),tit=new
Array(n);
h[1]=100,h[2]=150,h[3]=50,h[4]=120,h[5]=80,h[6]=160,h[7]=30;
var
texto=new
Array(n);
texto[1]='l',texto[2]='m',texto[3]='x',texto[4]='j',texto[5]='v',texto[6]='s',texto[7]='d',
function
barras()
{
if(document.all){
document.all('barra1').style.height=h[1];
document.all('barra1').style.top=(260-h[1]);
document.all('titulo1').style.top=(260-h[1]-25);
document.all('titulo1').style.visibility="visible";
document.all('barra2').style.height=h[2];
document.all('barra2').style.top=(260-h[2]);
document.all('titulo2').style.top=(260-h[2]-25);
document.all('titulo2').style.visibility="visible";
if(document.all('barra3')){
document.all('barra3').style.height=h[3];
document.all('barra3').style.top=(260-h[3]);
document.all('titulo3').style.top=(260-h[3]-25);
document.all('titulo3').style.visibility="visible";
}
if(document.all('barra4')){
document.all('barra4').style.height=h[4];
document.all('barra4').style.top=(260-h[4]);
document.all('titulo4').style.top=(260-h[4]-25);
document.all('titulo4').style.visibility="visible";
}
if(document.all('barra5')){
document.all('barra5').style.height=h[5];
document.all('barra5').style.top=(260-h[5]);
document.all('titulo5').style.top=(260-h[5]-25);
document.all('titulo5').style.visibility="visible";
}
if(document.all('barra6')){
document.all('barra6').style.height=h[6];
document.all('barra6').style.top=(260-h[6]);
document.all('titulo6').style.top=(260-h[6]-25);
document.all('titulo6').style.visibility="visible";
}
if(document.all('barra7')){
document.all('barra7').style.height=h[7];
document.all('barra7').style.top=(260-h[7]);
document.all('titulo7').style.top=(260-h[7]-25);
document.all('titulo7').style.visibility="visible";
}
}
}
</script>
</head>
<body >
<script
language="JavaScript" type="text/javascript">
document.write('<div id="caja">');
for(i=1;i<=n;i++){
document.write('<div id=barra'+i+'><img
src="bs.gif" width="1" height="1"
border="0"></div>');
document.write('<div
id=titulo'+i+'>'+h[i]+'</div>');
document.write('<div
id=pie'+i+'>'+texto[i]+'</div>');
}
document.write('</div>');
</script>
<a
href="javascript:barras()">barras</a>
</body>
</html><html>
<head>
<title>Gráfico
de bandas</title>
<style type="text/css">
#caja
{position:absolute;top:50px;left:50px;width:380px;height:300px;background-color:#ffcc66;}
#barra1{position:absolute;top:260px;left:60px;width:30px;height:0px;background-color:red;}
#barra2{position:absolute;top:260px;left:100px;width:30px;height:0px;background-color:blue;}
#barra3{position:absolute;top:260px;left:140px;width:30px;height:0px;background-color:red;}
#barra4{position:absolute;top:260px;left:180px;width:30px;height:0px;background-color:blue;}
#barra5{position:absolute;top:260px;left:220px;width:30px;height:0px;background-color:red;}
#barra6{position:absolute;top:260px;left:260px;width:30px;height:0px;background-color:blue;}
#barra7{position:absolute;top:260px;left:300px;width:30px;height:0px;background-color:red;}
#titulo1{position:absolute;top:260px;left:60px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#titulo2{position:absolute;top:260px;left:100px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#titulo3{position:absolute;top:260px;left:140px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#titulo4{position:absolute;top:260px;left:180px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#titulo5{position:absolute;top:260px;left:220px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#titulo6{position:absolute;top:260px;left:260px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#titulo7{position:absolute;top:260px;left:300px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
#pie1{position:absolute;top:260px;left:60px;width:40px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie2{position:absolute;top:260px;left:90px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie3{position:absolute;top:260px;left:130px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie4{position:absolute;top:260px;left:170px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie5{position:absolute;top:260px;left:210px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie6{position:absolute;top:260px;left:250px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie7{position:absolute;top:260px;left:290px;width:40px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
</style>
<script language="JavaScript" type="text/javascript">
file://n=nº barras
var
n=4;
file://array h = alturas de las barras
var
h=new Array(n),tit=new
Array(n);
h[1]=100,h[2]=150,h[3]=50,h[4]=120,h[5]=80,h[6]=160,h[7]=30;
var
texto=new
Array(n);
texto[1]='l',texto[2]='m',texto[3]='x',texto[4]='j',texto[5]='v',texto[6]='s',texto[7]='d',
function
barras()
{
if(document.all){
document.all('barra1').style.height=h[1];
document.all('barra1').style.top=(260-h[1]);
document.all('titulo1').style.top=(260-h[1]-25);
document.all('titulo1').style.visibility="visible";
document.all('barra2').style.height=h[2];
document.all('barra2').style.top=(260-h[2]);
document.all('titulo2').style.top=(260-h[2]-25);
document.all('titulo2').style.visibility="visible";
if(document.all('barra3')){
document.all('barra3').style.height=h[3];
document.all('barra3').style.top=(260-h[3]);
document.all('titulo3').style.top=(260-h[3]-25);
document.all('titulo3').style.visibility="visible";
}
if(document.all('barra4')){
document.all('barra4').style.height=h[4];
document.all('barra4').style.top=(260-h[4]);
document.all('titulo4').style.top=(260-h[4]-25);
document.all('titulo4').style.visibility="visible";
}
if(document.all('barra5')){
document.all('barra5').style.height=h[5];
document.all('barra5').style.top=(260-h[5]);
document.all('titulo5').style.top=(260-h[5]-25);
document.all('titulo5').style.visibility="visible";
}
if(document.all('barra6')){
document.all('barra6').style.height=h[6];
document.all('barra6').style.top=(260-h[6]);
document.all('titulo6').style.top=(260-h[6]-25);
document.all('titulo6').style.visibility="visible";
}
if(document.all('barra7')){
document.all('barra7').style.height=h[7];
document.all('barra7').style.top=(260-h[7]);
document.all('titulo7').style.top=(260-h[7]-25);
document.all('titulo7').style.visibility="visible";
}
}
}
</script>
</head>
<body >
<script
language="JavaScript" type="text/javascript">
document.write('<div id="caja">');
for(i=1;i<=n;i++){
document.write('<div id=barra'+i+'><img
src="bs.gif" width="1" height="1"
border="0"></div>');
document.write('<div
id=titulo'+i+'>'+h[i]+'</div>');
document.write('<div
id=pie'+i+'>'+texto[i]+'</div>');
}
document.write('</div>');
</script>
<a
href="javascript:barras()">barras</a>
</body>
</html>
 |
Home > DHTML > Ponga un gráfico en su vida > 1 - 2 - 3 - 4 - 5 - 6 - 7