在web页上划出动态变化的曲线

需求:客户有关于某仪器的运行参数(来自数据库),需要近乎实时的了解各个参数的状态曲线。如果超出警戒范围,则要发出警报(客户端)。
实现:AJAX无刷新动态(2秒)更新页面参数曲线,客户端调用ActiveX发出报警。
 
首先,是如何才能显示这些动态变化的点的曲线。
这里的思路比较简单:用div的高度来显示数值(嵌套一个小的div,有高度,居顶,加色显示,形成点),夹以repeater来横向显示这些div。
 1 < asp:Repeater  ID ="rpt_chart"  runat ="server" >
 2                                      < HeaderTemplate >
 3                                          < table  border ="0"  cellpadding ="0"  cellspacing ="0" >
 4                                              < tr >
 5                                      </ HeaderTemplate >
 6                                      < ItemTemplate >
 7                                          < td  height ='<%#  Eval("RegionHeight")% > ' style="background-image:  <% Eval("RegionImg") %> "
 8                                             valign="bottom">
 9                                              < div  style ='width:  2px; height: <%# Eval("StandardHeight")% > px;'
10                                                 title=' <% Eval("Name")+"/n"+Eval("Date")+"/n"+ Eval("StandardHeight") %> ' valign="top">
11                                                  < div  style ='height:  2px; background: <%# Eval("Color")% > ;'>
12                                                  </ div >
13                                              </ div >
14                                          </ td >
15                                      </ ItemTemplate >
16                                      < FooterTemplate >
17                                          </ tr ></ table >
18                                      </ FooterTemplate >
19                                  </ asp:Repeater >

注意:
1:数据点横向现实
   使用repeater特点,在header上动手脚,加一个table,tr的头。然后再item里面加入td重复。
2:点的实现
   先一个外层div, style ='width: 2px; height: <% # Eval("StandardHeight")%>px;',设置高度,但是无色;然后 valign ="top",这样它内部的物件就会在顶端显示;
   内嵌的物件还是一个div,固定高度(宽度其实也就固定了,就是他的parent的宽度,所以他的大小就是2*2的一个方块,正好是一个点。1*1的就太小了)。所不同的是,这个div有颜色 < div style='height: 2px; background: <%# Eval("Color")%>;'>,所以他就可以以一个小色块的方式出现在parent的顶端。
3:坐标转化
   由于reperater的td都是靠底显示( < td .valign="bottom">),所以,他的中线坐标需要转化。
动态,就需要一个时钟控件作triger ,用AJAX 来发出异步数据请求,然后无刷新更新页面曲线图表。
 
<asp:updatepanel>
.....Repeater.....
  < Triggers >
                                
< asp:AsyncPostBackTrigger  ControlID ="tm_retrieveDetail"  EventName ="Tick"  />
                            
</ Triggers >

ActiveX 来实现。由于.net开发ActiveX有些问题,(不好安装),所以使用VB6开发之。
< asp:Timer  runat ="server"  ID ="tm_retrieveAll"  Interval ="2000"  OnTick ="tm_retrieveAll_Tick" >
        
</ asp:Timer >
至于 客户端的报警,用
 
 1 Private  Declare  Function APIBeep Lib "kernel32" Alias "Beep" (ByVal dwFreq As LongByVal dwDuration As LongAs Long
 2' To make a beep lasting 500 milliseconds with frequency specified in the
 3' TextBox txtFrequency (try 1000 for starters):
 4Dim appLog As String
 5Dim alertLog As String
 6
 7Public Function Beep(msg As String)
 8  Dim frequency As Long
 9  Log_Event msg, alertLog
10  If ck_beep.Value Then
11     'call the beep interface
12     'frequency = CLng(txtFrequency.Text)
13      frequency = 100
14      APIBeep frequency, 500
15     'shell beep
16   Else
17     '
18     'ck_beep.Caption = "Beep--Has been disabled"
19   End If
20End Function
其他需求,诸如缩略图,放大图等,还有点数量控制(div不宜超过200个)等,都比较简单了,就是数据的坐标转化而已。

 

http://www.cnblogs.com/dlwang2002/archive/2006/12/04/581120.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值