本文介绍了一个使用JavaScript进行股市图表绘制的方法，通过与服务器交互获取实时数据并动态更新图表。该实现利用HTML表格元素来模拟画布效果，展示了如何根据数据变化调整坐标轴及绘制折线。
首先根据数据服务器后台管理得到状态是否画图，如果要画图则有服务器后台提供，绘图后台数据，
这个画图的方法是用javascript在层上绘span。
<%
@ Page CodeBehind="股市图.aspx.cs" Language="c#" AutoEventWireup="false" Inherits="测试隐藏刷新.WebForm10" %>
<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=100var y1=100var size//宽度var str=""//var a=0var i=0var tempy=0//画x 轴y轴时用的var tempx=0var Open ="Start"//这个是程序的状态，包括start--启动时初始划数据，runtime－－运行时var Input=Openvar start=""function GetData() 
{ var http = new ActiveXObject("Microsoft.XMLHTTP"); http.open("POST","Server.aspx?t="+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()",2000);}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" onload="GetData()"> <form name="111"> <div id="cs2"></div> <div id="canvas"></div> <div id="cs"></div> </form> </body></HTML>下面是服务器代码
<%@ Page language="JScript" %><%if(Application("Setup")==null)//设置状态专用的全局变量{ Application("Setup")="pleaseWait";//如果为刚刚启动}if(Application("Output")==null){ Application("Output")="pleaseWait";}var Input=Request("t")Application("Setup")=Temp.join(",")//记住第//Session("Output")="0"//记住第一位置也就是数组下标0是状态*/if(Input=="Start")//启动状态{ Response.Write(escape(Application("Setup")));}else{ Application("Setup")=Application("Setup")+Application("Output")//同时写设置状态是的新用户上来可以从当前时间继续往下看 Response.Write(escape(Application("Output")));//发布时--Session("Output")}%>这个是管理的后台页
<%@ Page language="c#" Codebehind="ServerAdmin.aspx.cs" AutoEventWireup="false" Inherits="测试隐藏刷新.WebForm12" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><HTML> <HEAD> <title>WebForm12</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <meta http-equiv="refresh" content="2"> </HEAD> <body MS_POSITIONING="GridLayout" BGCOLOR="background" TEXT="#ffffff"> <form id="Form1" method="post" runat="server"> <FONT face="宋体"> <asp:Panel id="Panel1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" Width="768px" Height="488px" HorizontalAlign="Center"> <P> <asp:Button id="Button2" runat="server" Text="数据复位"></asp:Button></P> <P> </P> <P> </P> <P> </P> <P> <asp:Label id="Label1" runat="server" Height="48px" Width="336px" Font-Bold="True" Font-Size="XX-Large" ForeColor="ActiveCaptionText" EnableViewState="False">Label</asp:Label></P> <P> </P> <P> <asp:Label id="Label4" runat="server" Height="48" Width="210px" Font-Bold="True" Font-Size="XX-Large" ForeColor="Snow" EnableViewState="False"></asp:Label></P> <P> </P> <P> </P> </asp:Panel> <asp:Button id="Button1" style="Z-INDEX: 102; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" Text="Button"></asp:Button></FONT> </form> </body></HTML>服务器的后台代码
using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Drawing;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;using System.Data.SqlClient;using System.Configuration;namespace 测试隐藏刷新{ /**//// <summary> /// WebForm12 的摘要说明。 /// </summary> public class WebForm12 : System.Web.UI.Page { protected System.Web.UI.WebControls.Label Label4; protected System.Web.UI.WebControls.Panel Panel1; protected System.Web.UI.WebControls.Button Button1; protected System.Web.UI.WebControls.Button Button2; protected System.Web.UI.WebControls.Label Label1; private void Page_Load(object sender, System.EventArgs e) { this.setSharelist(); Label1.Text=System.DateTime.Now.ToLongTimeString(); } public void setSharelist() { System.Data.SqlClient.SqlConnection SherCon = new SqlConnection(ConfigurationSettings.AppSettings["ConnectionString"]); try { System.Data.SqlClient.SqlCommand SherCommand = new SqlCommand("New_shareList_Select",SherCon); SherCommand.CommandType=System.Data.CommandType.StoredProcedure; SherCommand.Parameters.Add("@Count",System.Data.SqlDbType.Float); SherCommand.Parameters["@Count"].Direction=ParameterDirection.Output; SherCon.Open(); SherCommand.ExecuteNonQuery(); Label4.Text=SherCommand.Parameters["@Count"].Value.ToString(); this.setApplication(SherCommand.Parameters["@Count"].Value.ToString()); } catch(Exception e) { Response.Write(e); } finally { SherCon.Close(); } } public void setApplication(String Count) { String Minute=System.DateTime.Now.Minute.ToString(); String CheckDayUp=System.DateTime.Now.Hour.ToString()+Minute; Label1.Text=CheckDayUp; if(Minute.Length<2)//如果小于10分钟那么前补零 { Minute="0"+Minute; } //if(Convert.ToInt32(CheckDayUp)<1029 || Convert.ToInt32(CheckDayUp)>300)//如果小于10：29分那么就代表还么有开市 //{//如果当前时间小于 10：29||并且大于3点代表处于修饰专状态 //-----处于为开盘状态清楚数据 if(Application["Setup"]==null)//设置状态专用的全局变量 { //第一位今天的初始点数，以后存初始化信息用,号分割 Application["Setup"]="pleaseWait";//如果为刚刚启动 Application["Setup"]=Count+",";//如果为刚刚启动 } if(Application["Output"]==null)//存储即使输出的信息 { Application["Output"]="pleaseWait";//0平，1降，3升 } if(Session["DateTime"]==null)//存当前上政指数 { Session["DateTime"]=Count; } Response.Write("关于股市开盘和修盘已经写到程序中但为了演示功能将判断部分注释了~<br>"); //} //else //{ //关于开市－－必市已经作到程序里单未了掩饰所以去掉判断部分 if(Session["DateTime"].ToString()=="") { Session["DateTime"]=Count; } if(float.Parse(Session["DateTime"].ToString())<float.Parse(Count))//升 { Application["Output"]=""; for(int i=0;i<10;i++) { if((float.Parse(Count)-(float.Parse(Session["DateTime"].ToString()))*i)>0) {//控制输出多少个1叶就是下降多少位 Application["Output"]=Application["Output"].ToString()+"3,"; Application["Setup"]=Application["Setup"].ToString()+"3,"; } } Session["DateTime"]=Count; // Application["Output"]="3,"; // Application["Setup"]=Application["Setup"].ToString()+"3,"; } else if(float.Parse(Session["DateTime"].ToString())>float.Parse(Count))//降 { Application["Output"]=""; for(int i=0;i<10;i++) { if((float.Parse(Session["DateTime"].ToString())-(float.Parse(Count))*i)>0) {//控制输出多少个1叶就是下降多少位 Application["Output"]=Application["Output"].ToString()+"1,"; Application["Setup"]=Application["Setup"].ToString()+"1,"; } } Session["DateTime"]=Count; //Application["Output"]="1,"; //Application["Setup"]=Application["Setup"].ToString()+"1,"; } else //平 { Session["DateTime"]=Count; Application["Output"]="0,"; Application["Setup"]=Application["Setup"].ToString()+"0,"; } Response.Write("现在处于开市状态,今天开盘"+Application["Output"].ToString()); //} } Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码 override protected void OnInit(EventArgs e) { // // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。 // InitializeComponent(); base.OnInit(e); } /**//// <summary> /// 设计器支持所需的方法 - 不要使用代码编辑器修改 /// 此方法的内容。 /// </summary> private void InitializeComponent() { this.Button1.Click += new System.EventHandler(this.Button1_Click); this.Button2.Click += new System.EventHandler(this.Button2_Click); this.Load += new System.EventHandler(this.Page_Load); } #endregion private void Button1_Click(object sender, System.EventArgs e) { Application["Output"]="1,"; Application["Setup"]=Application["Setup"].ToString()+"1,"; } private void Button2_Click(object sender, System.EventArgs e) { Application["Output"]="0"; Application["Setup"]=Session["DateTime"].ToString()+","; } }}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
