随心所欲Ajax图形篇

最新推荐文章于 2022-05-02 18:35:24 发布

AngelLiujia

最新推荐文章于 2022-05-02 18:35:24 发布

阅读量1.3k

点赞数

分类专栏： Ajax 文章标签： ajax 图形 function table input 服务器

本文链接：https://blog.csdn.net/AngelLiujia/article/details/1370254

版权

Ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

- -本系列主要介绍一个简单的可以服务器户动绘图的Ajax希望各位喜欢:～～欧耶

首先简单介绍一下，这个画图主要是通过Ajax访问web页面返回的数据来画图，画图的方式

是在Div上绘制.我在编辑的时候加上了不少注疏如有不当欢迎直接～～

<HTML>
<head>
  <meta http-equiv="Content-Type" content="text/html;   charset=gb2312">
  <script language="JavaScript">
var   rs="";
var   x0=0//x轴启时点
var   x1=0//x轴结束点
var   y0=100
var   y1=100
var size//宽度
var str=""

//var a=0
var i=0
var tempy=0//画x 轴y轴时用的
var tempx=0
var Open ="Start"//这个是程序的状态，包括start--启动时初始划数据，runtime－－运行时
var Input=Open
var start=""
function GetData()
{

var http = new ActiveXObject("Microsoft.XMLHTTP");
http.open("POST","Server.aspx?LiuJia="+escape(Input),false);
http.send();
str = unescape(http.responseText);
var SetupTemp = new Array();//得到设置的数组

SetupTemp = str.split(",");
if(Open=="Start")//启动状态--第一次启动绝对进入该状态
{
if(SetupTemp[0]=="pleaseWait......")//如果会传的数据为pleaseWait......那么就代表服务器还没有设置数据
{
cs.innerHTML="服务器未启动请稍等";
}
else
{
//请注意不能在这里画太多的象素

  cs.innerHTML=cs.innerHTML+drawLine(0,5,0,500,"blue",4);//画左竖线
  cs.innerHTML=cs.innerHTML+drawLine(0,499,1510,499,"blue",4);//画下低横线
  tempy=470/10
  for(i;i<11;i++)//画左竖线的刻度尺
  {
   if(i==5)//设置中心点
   {


    y0=tempy*i+26//设置画折线的起始位置未当前上政指数就是刚刚开盘的时候
    y1=tempy*i+26

    cs.innerHTML=cs.innerHTML+drawLineAddString(3,tempy*i+10,5,tempy*i+10,"shamrock`",1,SetupTemp[0])//,SetupTemp[0]上政指数
   }
   else if(i<5)//画上半区刻度
   {
   cs.innerHTML=cs.innerHTML+drawLineAddString(3,tempy*i+10,5,tempy*i+10,"shamrock`",1,SetupTemp[0]*(11-i))
   }
   else//画下半区刻度
   {
      cs.innerHTML=cs.innerHTML+drawLineAddString(3,tempy*i+10,5,tempy*i+10,"shamrock`",1,"")
   }
  }
  tempx=1000/15//画x轴刻度
  cs.innerHTML=cs.innerHTML+drawLineAddString(tempx*2,500-20,tempx*2,500-20,"shamrock`",4,1)
  cs.innerHTML=cs.innerHTML+drawLineAddString(tempx*4,500-20,tempx*4,500-20,"shamrock`",4,2)
  cs.innerHTML=cs.innerHTML+drawLineAddString(tempx*6,500-20,tempx*6,500-20,"shamrock`",4,"Stop")//停盘
  cs.innerHTML=cs.innerHTML+drawLineAddString(tempx*8,500-20,tempx*8,500-20,"shamrock`",4,3)
  cs.innerHTML=cs.innerHTML+drawLineAddString(tempx*10,500-20,tempx*10,500-20,"shamrock`",4,4)


  //---画可能的初始化数据－－－如果不是在开盘时进入那么就必须画出开盘后到现在的线

  for(i=1;i<SetupTemp.length;i++)
  {


   setXOry(SetupTemp[i])
   canvas.innerHTML=canvas.innerHTML+drawLine(x0,y0,x1,y1,"red",3);

  }

  Input="0"
  Open="runtime"//处于运行时状态
  }
}
else//有数据返回就可以画
{

for(i=0;i<SetupTemp.length;i++)
{
//setXOry(SetupTemp[i])

//实现了向下探1次平衡，向下探2次平横
if(y0<496)//向下传投到x轴0点的时候不能在向下走
{
//在这里向下穿透不要调用1就可以不再画了
//canvas.innerHTML=canvas.innerHTML+SetupTemp[0].valueOf()+"1<br>";

setXOry(SetupTemp[i].valueOf())//直接调整画线坐标的函数//参数代表影响折线位置的 0-平,1-降-2升
}
if(x1<1500)//x轴未走到头的花可以继续走
{
canvas.innerHTML=canvas.innerHTML+drawLine(x0,y0,x1,y1,"red",3);
}

}

}
setTimeout("GetData()",1000);
}

function setXOry(start)//调整画线坐标的函数
{

if(start=="0")//向下
{

  x0=x1
  x1=x1+3;
  a=1
  y0=y1
// if(b==1)//代表a=2的时候是还是向下探地这时候，必须修正 y轴的起始点和终点一致保证－－－－a=2时划的斜线于 a=0的时候划的横线联合起来形成无断点图
{

//y0=y1
//b=1

//}//在这里b=1代表如果下一次直接绘制横县时也通知 a=0 修补y轴的起始点
}
else if(start=="1")//下降
{
y0=y1//平衡y轴
x0=x1
x1=x1+3//移动y轴的终点
y1=y1+3
a=1//如果a=1可以持续向下画，＝0代表向平行画
b=1

}
else if(start=="3")//上升
{
y0=y1//平衡y轴
x0=x1//平衡x轴
x1=x1+3
y1=y1-3
a=0

}
}

function drawLineAddString(x0,y0,x1,y1,color,size,ConText)//倒数第二个参数是竖线的大小，倒数第一个参数为显示的文字
{
rs = "<table style='top:"+y0+";left:"+x0+";position:absolute'>"+ConText+"<td bgcolor="+color+" height="+size+" width="+Math.abs(x1-x0)+"></td></table>";
return rs
}

function drawLine(x0,y0,x1,y1,color,size)//倒数第一个参数是竖线的大小
{

if   (y0   ==   y1)     //画横线
{
  rs   =   "<table   style='top:"+y0+";left:"+x0+";position:absolute'><td   bgcolor="+color+"   height="+size+" width="+Math.abs(x1-x0)+"></td></table>";
}
else   if   (x0   ==   x1)     //画竖线
{
  rs   =   "<table   style='top:"+y0+";left:"+x0+";position:absolute'><td   bgcolor="+color+"   width=1 height="+Math.abs(y1-y0)+"></td></table>";
}
else
{
var   lx   =   x1-x0
var   ly   =   y1-y0
var   l   =   Math.sqrt(lx*lx+ly*ly)//Math.sqrt求平方里面的参数x长度和y轴的上度
rs   =   new   Array();
for   (var   I=0;I<l;I+=1)//我猜这是划斜线的时候所以他一个格一个的画
{//l是要画的格子的总数,
  var   p   =   I/l;
  var   px   =   x0   +   lx*p;//从新计算每一个格子的x轴的起点
  var   py   =   y0   +   ly*p;//y轴的起点
  rs[rs.length]   =   "<table   style='top:"+py+";left:"+px+";position:absolute'><td   bgcolor="+color+" height="+size+"></td></table>";
}
rs   =   rs.join("");
}
return   rs
}

</script>
</head>
<body text="#66ffff" bgColor="#808080" οnlοad="GetData()">
  <form name="111">
   <div id="cs2"></div>
   <div id="canvas"></div>
   <div id="cs"></div>
  </form>
</body>
</HTML>