问题描述
求问各位牛人，我想对如下代码生成的页面进行持续动态刷新的话（例如股票行情走势图一样）应该如何更改？<scripttype="text/javascript">varxInterval=30;varyInterval;varData={'Text':true,'Grid':true,'Ruler':true,'LineW':0.8,'Even':3,'Time':GetTimeList(),'List':[{'Title':'有功功率','Check':true,'Color':'#f0f','Data':[{'time':"14:19:00",'value':"10"},{'time':"14:19:30",'value':"26"},{'time':"14:20:02",'value':"27"},{'time':"14:20:47",'value':"17"},{'time':"14:20:56",'value':"35"},{'time':"14:21:18",'value':"27"},{'time':"14:21:39",'value':"49"},{'time':"14:22:02",'value':"18"},{'time':"14:22:21",'value':"32"},{'time':"14:23:00",'value':"36"},{'time':"14:23:45",'value':"41"},{'time':"14:24:31",'value':"39"},{'time':"14:24:57",'value':"25"},{'time':"14:25:46",'value':"15"},{'time':"14:25:58",'value':"17"},{'time':"14:26:26",'value':"49"},{'time':"14:26:31",'value':"81"},]}]}varctx;functionGetTimeList(now){varnow=Date.parse("14:26:00");xInterval=30;varre=[];for(vari=0;i<15;i++){re.push((now.getHours()+':'+now.getMinutes()+':'+(now.getSeconds()>=30?30:0)).replace(/b(d)b/g,'0$1'));now=now.addSeconds(-30);}returnre.reverse();}jQuery(document).ready(function($){canvas=document.getElementById("canvas");if(canvas.getContext){ctx=canvas.getContext("2d");ctx.strokeStyle="red";ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(0,105);ctx.stroke();}vardate1=Date.parse("16:30:30");vardate2=Date.parse("16:30:30");vars=Date.today().compareTo(date2);vars=date1.compareTo(date2);varst=compareTime(Data.Time,Data.List[0].Data[1].time);Show(document.getElementById("canvas"),Data,document.getElementById("ServerList"));});functionRun(o,i){if(o)Data.List[i].Check=o.checked;Show(document.getElementById("canvas"),Data,document.getElementById("ServerList"));}functionShowTitle(str,event,color){vare=window.event;if(document.getElementById("temp_title")){document.getElementById("temp_title").style.display='block';document.getElementById("temp_title").style.borderColor=color;}else{varv=document.createElement("div");v.id="temp_title";v.style.borderColor=color;document.body.appendChild(v);}document.getElementById("temp_title").innerHTML=str.replace(/n/g,'<br/>');varxtop=e.clientY+document.documentElement.scrollTop+17;varxleft=e.clientX+document.documentElement.scrollLeft+10;document.getElementById("temp_title").style.top=xtop+"px";document.getElementById("temp_title").style.left=xleft+"px";}functioncompareTime(timeList,timeStr){outer:for(vari=0;i<timeList.length;i++){vardate1=Date.parse(timeStr);vardate2=Date.parse(timeList[i]);vars=date1.compareTo(date2);if(i==0){switch(s){case-1:returnnull;case0:returni;case1:continueouter;default:break;}}elseif(i==timeList.length-1){switch(s){case-1:returni-1;case0:returni;case1:returnnull;default:break;}}else{switch(s){case-1:returni-1;case0:returni;case1:continueouter;default:break;}}}}functionlineTo(o,arr,time,even,ht,text,colw,rowh){o.beginPath();o.fillStyle=o.strokeStyle=arr.Color;for(vari=0;i<arr.Data.length;i++){varresultTimeIndex=compareTime(Data.Time,arr.Data[i].time);if(resultTimeIndex!=null){vartimeArray=arr.Data[i].time.split(":");timeArray[2]=timeArray[2].replace(/b0{1}/g,"");vardistanceToOrigin=(timeArray[2]>=xInterval?timeArray[2]-xInterval:timeArray[2])/xInterval*colw+resultTimeIndex*colw;if(text){o.fillText(arr.Data[i].value,distanceToOrigin+46,ht-parseInt(arr.Data[i].value.replace(/%/g,""))/20*rowh-46);}o.lineTo(distanceToOrigin+50,ht-parseInt(arr.Data[i].value.replace(/%/g,""))/20*rowh-30);}}o.stroke();o.closePath();for(vari=0;i<arr.Data.length;i++){varresultTimeIndex=compareTime(Data.Time,arr.Data[i].time);if(resultTimeIndex!=null){vartimeArray=arr.Data[i].time.split(":");timeArray[2]=timeArray[2].replace(/b0{1}/g,"");vardistanceToOrigin=(timeArray[2]>=xInterval?timeArray[2]-xInterval:timeArray[2])/xInterval*colw+resultTimeIndex*colw;o.beginPath();varx=distanceToOrigin+50,y=ht-parseInt(arr.Data[i].value.replace(/%/g,""))/20*rowh-30;o.arc(x,y,even||3,0,360);vard=document.createElement('div');//tooltipd.className='cTitle';d.style.left=x-7+'px';d.style.top=(y-7+document.getElementById("canvas").getBoundingClientRect().top+document.documentElement.scrollTop)+'px';d.style.borderColor=arr.Color;d._title='曲线:'+arr.Title+'n时间:'+arr.Data[i].time+'n数值:'+arr.Data[i].value;d.onmouseover=function(event){ShowTitle(this._title,event,arr.Color);this.className+='cTitleHover';this.onmouseout=function(){if(document.getElementById("temp_title"))document.getElementById("temp_title").style.display='none';this.className='cTitle';}}document.body.appendChild(d);o.stroke();o.fill();o.closePath();}}}functionShow(d,data,f,colw,rowh){varcolw=colw||(d.offsetWidth-20)/data.Time.length;varrowh=rowh||(d.offsetHeight-20)/6varc=d.getContext('2d');c.fillStyle='#000';c.lineWidth=0.3;c.fillRect(0,0,d.offsetWidth,d.offsetHeight);c.strokeStyle="#ccc";c.fillStyle='#0ff';c.font='9pxverdana';c.textBaseline='top';varj=0;for(vari=70;i<d.offsetHeight;i+=rowh){c.beginPath();if(data.Ruler){vart=(100-j*20);c.fillText(t,(5-newString(t).length)*7,i-4);}if(data.Grid){c.lineTo(40,i);c.lineTo(d.offsetWidth,i);}c.stroke();c.closePath();j++;}if(data.Grid){for(vari=50;i<d.offsetWidth;i+=colw){c.beginPath();c.lineTo(i,0);c.lineTo(i,d.offsetHeight-20);c.stroke();c.closePath();}}if(data.Ruler){c.beginPath();for(vari=0;i<data.Time.length;i++){c.fillText(data.Time[i],i*colw+25,d.offsetHeight-13)}c.stroke();c.closePath();}c.lineWidth=data.LineW||0.8;if(!f.innerHTML){for(vari=0;i<data.List.length;i++){f.innerHTML+="<inputtype='checkbox'value='"+data.List[i].Title+"'checked='"+data.List[i].Check+"'onclick='Run(this,"+i+");'/><fontstyle='color:"+data.List[i].Color+"'>"+data.List[i].Title+"</font>";}}for(vari=0;i<data.List.length;i++){if(data.List[i].Check){lineTo(c,data.List[i],data.Time,data.Even,d.offsetHeight,data.Text,colw,rowh);}}}</script>
解决方案
解决方案二：
把ready里的写成一个function然后在$(document).ready(function(){setInterval(yourfuction,毫秒)；});这样就可以在间隔你设置的毫秒后循环调用，刷新了
解决方案三：
定时请求
解决方案四：
解决方案五：
你那个好复杂呀，我现在用百度的echarts