|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
Home > DHTML > Ponga un gráfico en su vida > 1 - 2 - 3 - 4 - 5 - 6 - 7
PONGA UN GRÁFICO EN SU VIDA (II)
por Luciano Moreno, del departamento de diseño web de BJS
Software.
Recta entre dos puntos.-
La ecuación de la recta en un sistema ortogonal es del tipo y=a+x+b, don de a y b son unas constantes a determinar. Si sabemos que la recta pasa por los puntos (X1,Y1), (X2,Y2), podemos escribir un sistema de 2 ecuaciones partiendo de la ecuación anterior, cuya resolución nos da a y b:
a=((Y2-Y1)/(X2-X1));
b=(Y1-a*X1);
y entrando estos valores en la ecuación inicial obtenemos y en función de x y de los puntos conocidos:
y=((Y2-Y1)/(X2-X1))*x+(Y1-((Y2-Y1)/(X2-X1))*X1)
esta va a ser nuestra ecuación básica de trabajo. Con ella sólo nos falta ir dando a x sucesivos valores entre su valor inicial y final, obteniendo con ellos los valores de y correspondientes, parejas de valores que nos dan cada uno de los puntos de la recta. Para obtener los sucesivos x entre X1 y X2 vamos a establecer una variable "p" que va a determinar cuantos puntos vamos a pintar de la recta, y con este valor vamos a ir incrementando x en "p" porciones del espacio entre X1 y X2; es decir, cada x es igual a su anterior más la distancia entre extremos dividida por el número de puntos a pintar:
x(i+1)=x(i)+(X2+X1)/p
Según todo esto, la forma de obtener todos los puntos entre los dos extremos pasa por el siguiente código JavaScript:
varX1=150,Y1=150;
varX2=225,Y2=25;
var a, b,
p=100;
var x=new Array(p);
var y=new Array(p);
function
linea(X1,Y1,X2,Y2)
{
a=((Y2-Y1)/(X2-X1));
b=(Y1-a*X1);
x[0]=X1;
y[0]=Y1;
for
(i=1;i<p;i++){
x[i]=x[(i-1)]+((X2-X1)/p);
y[i]=a*x1[i]+b;
}
en este código hemos definido como puntos inicial y final de la recta (150,150) y (225,25), hemos establecido 100 puntos entre los extremos, obtenido las constantes a , b y por último hemos iterado en un bucle para obtener las parejas de puntos intermedios (x[i], y[i]). Sólo notar cómo hemos establecido los valores iniciales x[0], y[0] a los de los puntos iniciales dados, ya que en el bucle for iteramos basándonos en los valores anteriores de x e y, por lo que debemos establecer a pulso los primeros y comenzar el bucle en i=1.
Nota también cómo hemos declarado los vectores x[i], y[i] fuera de la función. Con ello conseguimos que tengan el caracter de variables globales o públicas, con lo que podremos acceder a sus valores en cualquier parte posterior de nuestra página.
Ya tenemos pués todas las coordenadas de los puntos que van a formar nuestra recta. Vamos ahora a pintarlos, y vamos a hacerlo de forma total, mediante el método document.write(), usándolo para crear mediante un bucle una capa para cada uno de los puntos obtenidos antes:
var grafico='';
for
(i=0;i<p;i++){
grafico+='<div
style="position:absolute;top:'+y1[i]+'px;left:'+x1[i]+'px;">.</div>';
}
document.write(grafico);
con esto declaramos una variable grafico de tipo string que va a contener las sucesivas capas que creamos luego mediante un bucle for, a las que posicionamos dinámicamente asignándoles como coordenadas de posición las antes hayadas en la recta. Por último, llamamos a la función linea en el evento onLoad del BODY. Todo este código debemos escribirlo en el body de la página que lo contiene, quedándonos al final:
<html>
<head>
</head>
<body
onload="linea(X[1],Y[1],X[2],Y[2])">
<script language="JavaScript" type="text/javascript">
var X=new Array(2),Y=new
Array(2);
X[1]=200;X[2]=280;
Y[1]=150;Y[2]=50;
var a,b,p=150;
var
x1=new Array(p);
var y1=new Array(p);
function
linea(X1,Y1,X2,Y2)
{
a=((Y2-Y1)/(X2-X1));
b=(Y1-a*X1);
x1[0]=X1;
y1[0]=Y1;
for
(i=1;i<p;i++){
x1[i]=x1[(i-1)]+((X2-X1)/p);
y1[i]=a*x1[i]+b;
}
var grafico='';
for (i=0;i<p;i++){
grafico+='<div
style="position:absolute;top:'+y1[i]+'px;left:'+x1[i]+'px;">.</div>';
}
document.write(grafico);
}
</script>
</body>
</html>
El resultado de este código puedes verlo en esta ventana flotante.
Si miras el código fuente de la misma verás que han desaparecido todas las etiquetas HTML de la página que no estaban dentro de la variable grafico (<HTML>, <BODY>, etc). Esto es debido a que el método document.write() crea en realidad un nuevo documento, sobreescribiendo todo lo que había en su documento padre, lo que tiene sus ventajas (es un método compatible con todos los navegadores, permite incluir dentro del mismo funciones y etiquetas, etc) y sus inconvenientes (necesitamos escribir más código, perdemos de entrada todo el código de funciones del documento padre, etc).
Si a pesar de todo queremos usar este método vamos a incluir dentro de la variable grafico todo el código necesario para un documento completo:
<html>
<head>
<title>grafico
de lineas</title>
</head>
<body
onload="linea(X[1],Y[1],X[2],Y[2])">
<script language="JavaScript" type="text/javascript">
var X=new Array(2),Y=new
Array(2);
X[1]=200;X[2]=280;
Y[1]=150;Y[2]=50;
var a,b,p=150;
var
x1=new Array(p);
var y1=new Array(p);
function
linea(X1,Y1,X2,Y2)
{
a=((Y2-Y1)/(X2-X1));
b=(Y1-a*X1);
x1[0]=X1;
y1[0]=Y1;
for
(i=1;i<p;i++){
x1[i]=x1[(i-1)]+((X2-X1)/p);
y1[i]=a*x1[i]+b;
}
var
grafico='<html>\n<head>\n<title>\nejemplo de gráfico de
lineas\n</title>\n</head>\n<body
bgcolor="white">\n';
for (i=0;i<p;i++){
grafico+='<div
style="position:absolute;top:'+y1[i]+'px;left:'+x1[i]+'px;">.</div>\n';
}
grafico+='</body>\n</html>';
document.write(grafico);
}
</script>
</body>
</html>
cuyo resultado podemos apreciar en esta ventana.
 |
 |
Home > DHTML > Ponga un gráfico en su vida > 1 - 2 - 3 - 4 - 5 - 6 - 7