|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
Home > DHTML > Ponga un gráfico en su vida > 1 - 2 - 3 - 4 - 5 - 6 - 7
PONGA UN GRÁFICO EN SU VIDA (IV)
por Luciano Moreno, del departamento de diseño web de BJS
Software.
Gráfico de varias líneas.-
Vamos ahora a utilizar lo ya aprendido para pintar un gráfico de varias líneas, ideal para representar una serie de datos visualmente.
Para ello vamos a usar la ecuación de línea recta entre dos puntos, pero ahora vamos a definir por ejemplo 7 puntos, y vamos a hacer que cuando la función JavaScript detecte que hemos llegado a trazar la recta entre los dos primeros se active de nuevo, esta vez dibujando la recta entre el segundo punto y el tercero, y así sucesivamente hasta completar el gráfico.
Elcódigo de nuestra página quedaría:
<html>
<head>
</head>
<bodyonload="linea(X[1],Y[1],X[2],Y[2])">
<scriptlanguage="JavaScript" type="text/javascript">
varp=7;varX=newArray(p),Y=newArray(p);
X[1]=10;X[2]=80;X[3]=105;X[4]=180;X[5]=230;X[6]=270;X[7]=300;
Y[1]=5;Y[2]=98;Y[3]=50;Y[4]=150;Y[5]=-10;Y[6]=110;Y[7]=10;
var X3=105;
var Y3=50;
var a,b,n=500;
var x1=new Array(2*n);
var y1=new Array(2*n);
function linea(X1,Y1,X2,Y2)
{
a=((Y2-Y1)/(X2-X1));
b=(Y1-a*X1);
x1[1]=X1;
y1[1]=Y1;
for (i=2;i<n;i++)
{
x1[i]=x1[(i-1)]+((X2-X1)/499);
y1[i]=a*x1[i]+b;
}
if(p>2)
{
X1=X[2];
Y1=Y[2];
X2=X[3];
Y2=
Y[3];for(i=n;i<=(2*n);i++)
{
a=((Y2-Y1)/(X2-X1));
b=(Y1-a*X1);
x1[1]=X1;
y1[1]=Y1;
x1[i]=x1[(i-1)]+((X2-X1)/499);
y1[i]=a*x1[i]+b;
}
}
if(p>3)
{
X1=X[3];
Y1=Y[3];
X2=X[4];
Y2=
Y[4];for(i=2*n;i<=(3*n);i++)
{
a=((Y2-Y1)/(X2-X1));
b=(Y1-a*X1);
x1[1]=X1;
y1[1]=Y1;
x1[i]=x1[(i-1)]+((X2-X1)/499);
y1[i]=a*x1[i]+b;
}
}
if(p>4)
{
X1=X[4];
Y1=Y[4];
X2=X[5];
Y2=
Y[5];for(i=3*n;i<=(4*n);i++)
{
a=((Y2-Y1)/(X2-X1));
b=(Y1-a*X1);
x1[1]=X1;
y1[1]=Y1;
x1[i]=x1[(i-1)]+((X2-X1)/499);
y1[i]=a*x1[i]+b;
}
}
if(p>5)
{
X1=X[5];
Y1=Y[5];
X2=X[6];
Y2=
Y[6];for(i=4*n;i<=(5*n);i++)
{
a=((Y2-Y1)/(X2-X1));
b=(Y1-a*X1);
x1[1]=X1;
y1[1]=Y1;
x1[i]=x1[(i-1)]+((X2-X1)/499);
y1[i]=a*x1[i]+b;
}
}
if(p>6)
{
X1=X[6];
Y1=Y[6];
X2=X[7];
Y2=
Y[7];for(i=5*n;i<=(6*n);i++)
{
a=((Y2-Y1)/(X2-X1));
b=(Y1-a*X1);
x1[1]=X1;
y1[1]=Y1;
x1[i]=x1[(i-1)]+((X2-X1)/499);
y1[i]=a*x1[i]+b;
}
}
for (i=1;i<((p-1)*n);i++)
{
if(i==1) document.write('<div style="position:absolute;top:'+(266-Y[1])+'px;left:'+(180+X[1])+'px;font-size:10px;font-family:Verdana;">('+X[1]+','+Y[1]+')</div>');
if(i==500) document.write('<div style="position:absolute;top:'+(249-Y[2])+'px;left:'+(181+X[2])+'px;font-size:10px;font-family:Verdana;">('+X[2]+','+Y[2]+')</div>');
if(i==1000) document.write('<div style="position:absolute;top:'+(266-Y[3])+'px;left:'+(173+X[3])+'px;font-size:10px;font-family:Verdana;">('+X[3]+','+Y[3]+')</div>');
f(i==1500) document.write('<div style="position:absolute;top:'+(250-Y[4])+'px;left:'+(175+X[4])+'px;font-size:10px;font-family:Verdana;">('+X[4]+','+Y[4]+')</div>');
if(i==2000) document.write('<div style="position:absolute;top:'+(265-Y[5])+'px;left:'+(173+X[5])+'px;font-size:10px;font-family:Verdana;">('+X[5]+','+Y[5]+')</div>');
if(i==2500) document.write('<div style="position:absolute;top:'+(250-Y[6])+'px;left:'+(173+X[6])+'px;font-size:10px;font-family:Verdana;">('+X[6]+','+Y[6]+')</div>');
if(i==2999) document.write('<div style="position:absolute;top:'+(265-Y[7])+'px;left:'+(175+X[7])+'px;font-size:10px;font-family:Verdana;">('+X[7]+','+Y[7]+')</div>');
else document.write('<div style="position:absolute;top:'+(250-y1[i])+'px;left:'+(200+x1[i])+'px;">.</div>'); }
}
</script>
</body>
</html>
en el que vemos que hemos definido nuestros siete puntos mediante las parejas de puntos ( X[i] , Y[i] ), y luego hemos ido usando los condicionales if para determinar en que tramo del gráfico nos encontramos. Una vez que hemos asignado a las metrices x1(i), y1(i) todos los puntos de los diferentes tramos del gráfico, sólo nos queda pintar este, lo que hacemos madiante capas, asignando a cada capa como posición las sucesivas parejas de puntos (x1(i), y1(i)) del correspondiente array.
Por último, y para dar un toque elegante al gráfico, hemos introducido unas capas extras para los valores de i iguales a 500, 1000, 1500, 2000, 2500 y 2999, en las que hemos puesto unas leyendas con los valores de estos puntos, que corresponden a los extremos de cada intervalo del gráfico (puntos iniciales y finales de cada tramo de recta).
El resultado de este código puedes verlo en esta ventana flotante.
En el próximo capítulo aprenderemos a crear gráficos de bandas.
 |
 |
Home > DHTML > Ponga un gráfico en su vida > 1 - 2 - 3 - 4 - 5 - 6 - 7