前臺：
/**
*-----------------------------------------------------------------
*<copyright> Copyright (c) 2010</copyright>
*<copyright> All rights reserved.</copyright>
*<summary>客戶端畫線形圖，根據數據實時展示</summary>
*<example> var data=new period([0,10],[188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]);
* new gov.Graphic(data,"box");
* // period(param1,param2)：第一個參數代表當前顯示的值（縱座標），第二個參數代表（橫座標）
* // Graphic(param1,param2):第二個參數是頁面的div對象，將該線性圖放在的位置
* // 屬性setOptions內容可根據實際情況進行設計
*</example>
*<current_version>var 1.0</current_version>
*<author></author>
*<finish_date></finish_date>
* -----------------------------------------------------------------
*/
var gov=new Object();
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var $ = function(elem) {
if (arguments.length > 1) {
for (var i = 0, elems = [], length = arguments.length; i < length; i++)
elems.push($(arguments[i]));
return elems;
}
if (typeof elem == 'string') {
return document.getElementById(elem);
} else {
return elem;
}
};
var period = Class.create();
period.prototype = {
initialize:function(value,time){
this.value = value;
this.time = time;
}
};
gov.Graphic = Class.create();
gov.Graphic.prototype={
initialize: function(data,elm,options){
this.setOptions(options);
this.entity=document.createElement("div");
this.pointBox=$(elm);
this.showPointGraphic(data);
},
setOptions: function(options) {
this.options = {
height:120, //繪圖區域高度
maxHeight:50, //y軸最高數值
barDistance:26, //x軸座標間距
topDistance:0, //上部填充
bottomDistance:0, //底部填充
leftDistance:20,
pointWidth:5, //座標點寬度
pointHeight:5, //座標點高度
pointColor:"#ff0000", //座標點顏色
lineColor:"#ffd43a", //連接線顏色
valueWidth:20, //y軸數值寬度
valueColor:"#000", //y軸數值顏色
timeWidth:20, //x軸數值寬度
timeColor:"#000", //x軸數值顏色
disvalue:true, //是否顯示y軸數值
distime:true //是否顯示x軸數值
}
Object.extend(this.options, options || {});
},
showPointGraphic:function(data,obj)
{
var This=this;
var showPoints=new Array();
var values=new Array();
var times=new Array();
This.points=data;
This.count=data.value.length;
for(var i=0;i<This.count;i++)
{
var showPoint=document.createElement("div");
var spanValue=document.createElement("span");
var spanTime=document.createElement("span");
showPoint.height=This.points.value[i];
showPoint.value=This.points.value[i];
showPoint.time=This.points.time[i];
showPoint.style.backgroundColor=this.options.pointColor;
showPoint.style.fontSize="0px";
showPoint.style.position="absolute";
showPoint.style.zIndex ="999";
showPoint.style.width=this.options.pointWidth+"px";
showPoint.style.height=this.options.pointHeight+"px";
showPoint.style.top=this.options.topDistance+"px";
spanValue.style.position="absolute";
spanValue.style.width=this.options.valueWidth+"px";
spanValue.style.textAlign="center";
spanValue.style.color=this.options.valueColor;
spanValue.style.zIndex ="999";
spanTime.style.position="absolute";
spanTime.style.width=this.options.timeWidth+"px";
spanTime.style.textAlign="center";
spanTime.style.color=this.options.timeColor;
var timeHeight=15;
var valueHeight=21;
if(!this.options.disvalue) {
spanValue.style.display="none";
valueHeight=this.options.pointHeight;
}
if(!this.options.distime) {
spanTime.style.display="none";
timeHeight=0;
}
var left;
if(showPoints.length!=0){
left=parseInt(showPoints[showPoints.length-1].style.left)+parseInt(showPoints[showPoints.length-1].style.width)+this.options.barDistance;
}
else{
left=this.options.leftDistance;
}
showPoint.style.left=left+"px";
spanValue.style.left=left+parseInt((this.options.pointWidth-this.options.valueWidth)/2)+"px";
spanTime.style.left=left+parseInt((this.options.pointWidth-this.options.timeWidth)/2)+"px";
if(showPoint.height>this.options.maxHeight)
{
showPoint.height=this.options.maxHeight;
}
spanValue.innerHTML=showPoint.value;
spanTime.innerHTML=showPoint.time;
showPoints.push(showPoint);
values.push(spanValue);
times.push(spanTime);
This.entity.appendChild(showPoint);
This.entity.appendChild(spanValue);
This.entity.appendChild(spanTime);
var percentage=showPoints[i].height/this.options.maxHeight||0;
var pointTop=(this.options.height-this.options.topDistance-this.options.bottomDistance-timeHeight-valueHeight)*percentage;
showPoints[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-this.options.pointHeight)+"px";
values[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-valueHeight)+"px";
times[i].style.top=this.options.height-this.options.bottomDistance-timeHeight+"px";
}
var _leng=showPoints.length
for(var i=0;i<_leng;i++)
{
if(i>0)
{
This.drawLine(parseInt(showPoints[i-1].style.left),
parseInt(showPoints[i-1].style.top),
parseInt(showPoints[i].style.left),
parseInt(showPoints[i].style.top)
);
}
}
This.Constructor.call(This);
},
drawLine:function(startX,startY,endX,endY)
{
var xDirection=(endX-startX)/Math.abs(endX-startX);
var yDirection=(endY-startY)/Math.abs(endY-startY);
var xDistance=endX-startX;
var yDistance=endY-startY;
var xPercentage=1/Math.abs(endX-startX);
var yPercentage=1/Math.abs(endY-startY);
if(Math.abs(startX-endX)>=Math.abs(startY-endY))
{
var _xnum=Math.abs(xDistance)
for(var i=0;i<=_xnum;i++)
{
var point=document.createElement("div");
point.style.position="absolute";
point.style.backgroundColor=this.options.lineColor;
point.style.fontSize="0";
point.style.width="1px";
point.style.height="1px";
startX+=xDirection;
point.style.left=startX+this.options.pointWidth/2+"px";
startY=startY+yDistance*xPercentage;
point.style.top=startY+this.options.pointHeight/2+"px";
this.entity.appendChild(point);
}
}
else
{
var _ynum=Math.abs(yDistance)
for(var i=0;i<=_ynum;i++)
{
var point=document.createElement("div");
point.style.position="absolute";
point.style.backgroundColor=this.options.lineColor;
point.style.fontSize="0";
point.style.width="1px";
point.style.height="1px";
startY+=yDirection;
point.style.top=startY+this.options.pointWidth/2+"px";
startX=startX+xDistance*yPercentage;
point.style.left=startX+this.options.pointHeight/2+"px";
this.entity.appendChild(point);
}
}
},
Constructor:function()
{
this.entity.style.position="absolute";
this.pointBox.innerHTML="";
this.pointBox.appendChild(this.entity);
}
}
WEB服務：
using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Web.Script.Services;
/// <summary>
/// 實時跟蹤活動，獲得曲線數據
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
//若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消對下行的註釋。
// [System.Web.Script.Services.ScriptService]
public class WSRealtimeLine : System.Web.Services.WebService
{
public WSRealtimeLine()
{
//如果使用設計的組件，請取消註釋以下行
//InitializeComponent();
}
public static int a = 0;
public static ArrayList i = new ArrayList();
[WebMethod]
public ArrayList LineData()
{
//i.Add(a + 10);
//a++;
if (a > 10)
{
i.Clear();
a = 0;
i.Add(a);
}
else
{
i.Add(a);
}
a++;
return i;
}
}
ASP頁面
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WS/WSScript/WSImage/WSRealtimeLine.asmx" />
</Services>
</asp:ScriptManager>
</form>
</body>