C#+VML画曲线
各位大侠，我用c#和vml画实时曲线，在数据点少的时候曲线生成还是可以的，但是数据点上百上千后曲线生成就特别慢，请大些帮忙优化一下function VMLCurve(objDiv)
{
this.objDiv = objDiv; // obj
this.toolTips = ""; // 提示信息
this.configXPerValue = 0;
this.configYPerValue = 0;
this.configXMinValue = 0;
this.configYMinValue = 0;
this.OriginXValue = 0; // 圆点坐标
this.OriginYValue = 0;
//定义区域参数
this.group = null; // v:group
this.n = 1; // 倍数
this.gpWidth = 700; // Width
this.gpHeight = 400; // Height
this.configXTextLeft = -10; // 定义 X轴坐标值左边离坐标距离
this.configXTextTop = 10; // 定义 X轴坐标值上方离X轴的距离
this.configYLeft = 60; // 定义 Y轴距对象左边的距离
this.configYTextRight = 40; // 定义 Y轴坐标值离Y轴右边的距离
this.configYTextBottom = -15; // 定义 Y轴坐标值离坐标下边距离
//X轴值
this.configXValue = new Array();
//Y轴值
this.configYValue = new Array(10);
// Init BackGround
this.Background = null;
this.bgColor = "#C4E1FF"; // BackGround Color
//设置点线的属性
this.PointRadius = 2; //圆点的半径大小
this.LineSize = 5; //线的大小
//9条曲线，9条颜色
this.PointColor = new Array('#FF0000','#ff00ff','#6600ff','#9966cc','#ffa6ce','#cc6633','#006666','#990066','#330066'); //点的颜色
this.LineColor = new Array('#FF0000','#ff00ff','#6600ff','#9966cc','#ffa6ce','#cc6633','#006666','#990066','#330066'); //线的颜色
}
// Init
/*
---------------参数--------------
strObj object对象
strTitle 实时曲线标题
XTitle X轴标题
YTitle Y轴标题
Cdzs 测点数量
Cdbh 测点位号
---------------------------------
*/
VMLCurve.prototype.init = function(strObj,strTitle,XTitle,YTitle,Cdzs)
{
this.gpcX = this.gpWidth/this.n; // coordsize X
this.gpcY = this.gpHeight/this.n; // coordsize Y
this.configXLen = this.gpWidth - this.configYLeft * 2 + 20; // 定义 X 轴长度
this.configYLen = this.gpHeight - 50; // 定义 Y 轴长度
this.configXNum = this.configXValue.length; // X轴刻度数
this.configYNum = this.configYValue.length; // Y轴刻度数
this.configXTop = this.configYLen + 10; //定义 X轴距对象上边的距离
this.configXPerLen = str2Float((this.configXLen-20)/this.configXNum,2); //定义 X轴每刻度长度
this.configYPerLen = str2Float((this.configYLen-15)/this.configYNum,2); //定义 Y轴每刻度长度
//初始化背景参数
this.bgWidth = this.gpWidth; // Height
this.bgHeight = this.gpHeight; // Width
if(this.configYPerValue!=0)
{
var tempArr = new Array(this.configYNum);
for(var i=0;i<this.configYNum;i++)
{
tempArr[i] = str2Float(this.configYMinValue+this.configYPerValue*i,2);
}
this.configYValue = tempArr;
}
else
{
this.configYPerValue = str2Float((this.configYValue(this.configYNum)-this.configYMinValue)/this.configYNum,4);
}
/*if(this.configXPerValue!=0)
{
var tempArr = new Array(this.configXNum);
for(var i=0;i<this.configXNum;i++)
{
tempArr[i] = str2Float(this.configXMinValue+this.configXPerValue*i,2);
}
this.configXValue = tempArr;
}
else
{
//this.configXPerValue = str2Float((this.configXValue(this.configXNum)-this.configXMinValue)/this.configXNum,2);
} */
this.configYValue = this.configYValue.reverse(); //倒序数组
this.createGroup();
this.createBackgroud();
this.createCoordinate();
this.createXTableLine(XTitle);
this.createYTableLine(YTitle);
//this.setTitle(strTitle);
this.strObj = strObj;
}
//建立画图区域
VMLCurve.prototype.createGroup = function()
{
this.group = document.createElement("<v:group ID=\"group1\" coordsize=\""+this.gpcX+","+this.gpcY+"\" style=\"z-index:-10;width:"+this.gpWidth+"px;height:"+this.gpHeight+"px\">");
this.objDiv.insertBefore(this.group);
}
//填充背景
VMLCurve.prototype.createBackgroud = function()
{
this.Background = document.createElement("<v:rect fillcolor=\"white\" strokecolor=\"black\" style=\"z-index:-8;width:"+this.bgWidth+"px;height:"+this.bgHeight+"px\" />");
this.Background.insertBefore(document.createElement("<v:fill rotate=\"t\" type=\"gradient\" color2=\""+this.bgColor+"\" />"));
this.Background.insertBefore(document.createElement("<v:shadow on=\"t\" type=\"single\" color=\"silver\" offset=\"3pt,3pt\" />"));
this.group.insertBefore(this.Background);
}
//建立坐标轴
VMLCurve.prototype.createCoordinate = function()
{
var pointX1 = this.configYLeft + "," + this.configXTop; //(X,Y)
var pointX2 = this.configYLeft + this.configXLen + "," + this.configXTop; //(X,Y)
var pointY1 = pointX1;
var pointY2 = this.configYLeft + "," + eval(this.configXTop-this.configYLen + 10);//(X,Y)
this.createCoordinateLine(pointY1,pointX2); //X轴
//设置X轴起点的Y值（最小值不为0）
this.createText(0,"Y",this.configYLeft-this.configYTextRight,eval(this.configXTop),this.configYValue[this.configYValue.length-1],"pBlack");
this.createCoordinateLine(pointY1,pointY2); //Y轴
this.setOriginValue(this.OriginXValue,this.OriginYValue);
}
//建立坐标线
VMLCurve.prototype.createTableLine = function(xPoint,yPoint,sTableColor)
{
var tempLine = document.createElement("<v:line from=\""+xPoint+"\" to=\""+yPoint+"\" strokeColor=\""+sTableColor+"\" style=\"Z-INDEX:8;POSITION:absolute;/>");
this.group.insertBefore(tempLine);
tempLine.insertBefore(document.createElement("<v:stroke dashstyle=\"Solid\" />"));
}
//画坐标轴线
VMLCurve.prototype.createCoordinateLine = function(xPoint,yPoint)
{
var tempLine = document.createElement("<v:line from=\""+xPoint+"\" to=\""+yPoint+"\" strokeColor=\"#FF6600\" strokeweight=\"1px\" style=\"Z-INDEX:8;POSITION:absolute;\"/>");
this.group.insertBefore(tempLine);
tempLine.insertBefore(document.createElement("<v:stroke EndArrow=\"classic\" />"));
}
//创建文本提示信息
//id:唯一标识；Type:类型（X为X轴标题信息；Y为Y轴标题信息）
VMLCurve.prototype.createText = function(id,Type,xLeft,xTop,sText,sClass)
{
var tempObj;
if(id != ""|| id != null)
{
if(Type == "X")
{
tempObj = document.createElement("<P id=\"XText"+id+"\" class=\""+sClass+"\" style=\"Z-INDEX:8;LEFT:"+(xLeft-15)+"px;POSITION:absolute;TOP:"+xTop+"px;\"/>");
//tempObj.innerHTML = sText.substr(11,5);//取出hh24:mi
tempObj.innerHTML = sText;
this.group.insertBefore(tempObj);
}
else if(Type == "Y")
{
tempObj = document.createElement("<P id=\"YText"+id+"\" class=\""+sClass+"\" style=\"Z-INDEX:8;LEFT:"+(xLeft-12)+"px;POSITION:absolute;TOP:"+(xTop)+"px;\"/>");
tempObj.innerHTML = sText;
this.group.insertBefore(tempObj);
}
}
else
{
tempObj = document.createElement("<P class=\""+sClass+"\" style=\"Z-INDEX:8;LEFT:"+xLeft+"px;POSITION:absolute;TOP:"+xTop+"px;\"/>");
tempObj.innerHTML = sText;
this.group.insertBefore(tempObj);
}
}
// 创建 X 坐标网格线
VMLCurve.prototype.createXTableLine = function(XTitle)
{
var x1,y1,x2,y2,point1,point2,sTableColor;
sTableColor = "#CCCCCC";
var v_XValue;
for(var i=0;i<this.configXValue.length;i++)
{
//if( i%parseInt((this.configXValue.length/6)) == "0")
// if (i==0)
// {
// v_XValue = this.configXValue[i];
// }
// else
// {
if(Math.round((this.configXValue.length/6),0)<6)
{
if(i% 6 == 0)
{
v_XValue = this.configXValue[i];
}
else
{
v_XValue = "";
}
}
else
{
if(i% Math.round((this.configXValue.length/6),0) == Math.round(this.configXValue.length/6,0)-1)
{
v_XValue = this.configXValue[i];
}
else
{
v_XValue = "";
}
}
// }
x1 = eval(this.configYLeft + this.configXPerLen*(i+1));
y1 = eval(this.configXTop-this.configYLen)+20;//由上向下画线
x2 = x1;
y2 = eval(this.configXTop+5);
point1 = x1 + "," + y1;
point2 = x2 + "," + y2;
this.createTableLine(point1,point2,sTableColor);
//绘制X轴数据
this.createText(i,"X",x1+this.configXTextLeft,this.configXTop+this.configXTextTop,v_XValue,"pBlack");
} --------------------编程问答-------------------- //绘制Y轴标题
var tempObj = document.createElement("<P id=\"YTitle\" style=\"Z-INDEX:8;LEFT:30px;POSITION:absolute;TOP:20px;\"/>");
tempObj.innerHTML = "<FONT size='2'>"+YTitle+"</FONT>";
this.group.insertBefore(tempObj);
}
//设置标题
VMLCurve.prototype.setTitle = function(strTitle)
{
var tempObj = document.createElement("<div id=\"DIV_Title\" class=\"Title\" style=\"POSITION:absolute;Z-INDEX:9;LEFT:"+40+"px;TOP:"+(this.configXTop+40)+"px;width:"+(this.configXLen)+"px;height:"+(this.gpHeight-this.configXTop-20)+";/>");
tempObj.innerHTML = strTitle;
this.group.insertBefore(tempObj);
}
// 画圆点坐标
VMLCurve.prototype.setOriginValue = function(x,y)
{
this.createText(null,'',this.configYLeft+this.configXTextLeft,this.configXTop+this.configXTextTop,x,"pBlack");
this.createText(null,'',this.configYLeft-this.configYTextRight,this.configXTop-this.configYTextBottom,y,"pBlack");
}
// 设置纵坐标的值
VMLCurve.prototype.setPointsValue = function(xValueArr,yValueArr,Cdzs,Cdbh)
{
var sValue = new Array(9);
var yValue = new Array(9);
var thisY = new Array(9);
var tempY = new Array(9);
var last_X = new Array(9);
var last_Y = new Array(9);
var xValue = 0;
var thisX = 0;
for(var t=0;t<Cdzs;t++)
{
sValue[t] = "";
yValue[t] = 0;
thisY[t] = 0;
tempY[t] = 0;
last_X[t] = 0;
last_Y[t] = 0;
}
for(var i=0;i<Cdzs;i++)
{
for(var j=0;j<xValueArr.length;j++)
{
if(yValueArr[i][j] == null) break;
thisX = str2Float(xValueArr[j],4);
xValue = str2Float(this.configYLeft + str2Float(thisX * this.configXPerLen,4),4);
thisY[i] = str2Float(yValueArr[i][j],4);
//由于 Y 轴不是从 0 开始，而是从 自定义值开始，故要减去起始值
thisY[i] = thisY[i] - vc.configYMinValue;
tempY[i] = str2Float((thisY[i] - this.OriginYValue)/this.configYPerValue,4);
yValue[i] = str2Float(this.configXTop - str2Float(tempY[i] * this.configYPerLen,4),4);
sValue[i] = "";
// if(i == 0)
// {
sValue[i] += "测点["+Cdbh+"]在[" + vc.configXValue[j] + "]的值为[" + yValueArr[i][j] + "]";
// }
// else
// {
// sValue[i] += i.toString() + "号机组在[" + vc.configXValue[j] + "]的值为[" + yValueArr[i][j] + "]";
// }
this.createPoint(i,j,xValue,yValue[i],sValue[i]);
if(last_X[i] != 0 && last_Y[i] != 0)
{
this.createLine(i,j,last_X[i],last_Y[i],xValue,yValue[i]);
}
last_X[i] = xValue;
last_Y[i] = yValue[i];
}
}
this.PreviousPointY = 0;
this.PointsYCount = 0;
}
// create Point
VMLCurve.prototype.createPoint = function(id1,id2,sLeft,sTop,sText)
{
//根据圆点的坐标,得到左上方点的坐标
var xLeft = sLeft - this.PointRadius;
var xTop = sTop - this.PointRadius;
//var tempOval = document.createElement("<v:oval id=\"Point"+ id1.toString() + id2.toString() +"\" title=\""+sText+"\" style=\"POSITION:absolute;Z-INDEX:12;LEFT:"+xLeft+"px;TOP:"+xTop+"px;width:"+2*this.PointRadius+";height:"+2*this.PointRadius+";cursor:hand;\" stroked=\"f\" fillcolor=\""+this.PointColor[id1] +"\" strokeweight=\"1px\">");
var tempOval = document.createElement("<v:oval id=\"Point"+ id1.toString() + id2.toString() +"\" title=\""+sText+"\" style=\"POSITION:absolute;Z-INDEX:12;LEFT:"+xLeft+"px;TOP:"+xTop+"px;width:4px;height:4px;cursor:hand;\" stroked=\"f\" fillcolor=\""+this.PointColor[id1] +"\" strokeweight=\"1px\">");
group1.insertBefore(tempOval);
}
//以两点为坐标画线
VMLCurve.prototype.createLine = function(id1,id2,x1,y1,x2,y2)
{
var tempLine = document.createElement("<v:line id=\"DataLine"+ id1.toString() + id2.toString() +"\" from=\""+x1+","+y1+"\" to=\""+x2+","+y2+"\" strokeColor=\"#FF6600\" strokeweight=\"1px\" style=\"Z-INDEX:8;POSITION:absolute;\"/>");
var tempStroke = document.createElement("<v:stroke dashstyle='solid' color='"+this.LineColor[id1] +"'/>");
group1.insertBefore(tempLine);
tempLine.insertBefore(tempStroke);
}
/*以下代码来自网络,主要功能是对数字进行格式化
* 字符串转换为数字(""-->0)as_type--str,num
* 参数说明:
as_str--转换的字符串
ai_digit--转换的小数位数(null--不限制小数位数,0--转换为整型,>0按小数位数转换)
as_type--转换后返回的类型(null,"num"--转换为数字类型,"str"--转换为字符串
(按小数格式化后的字符串)
* 例如:
* str2float("10.2124568795")返回float类型10.2124568795
* str2float("10.6",0)返回Int类型11(使用四舍五入的方法)
* str2float("10.2",2)返回float类型10.1
* str2float("10.2",2,"str")返回String类型"10.20"(按小数位数格式化字符串)
* str2float("10.216",2)返回float类型10.22
* str2float("10.216",2,"str")返回String类型"10.22"*/
function str2Float(as_str,ai_digit,as_type)
{
var fdb_tmp = 0;
var fi_digit = 0;
var fs_digit = "1";
var fs_str = "" + as_str;
var fs_tmp1 = "";
var fs_tmp2 = "";
var fi_pos = 0;
var fi_len = 0;
fdb_tmp = parseFloat(isNaN(parseFloat(fs_str))?0:fs_str);
switch (true)
{
case (ai_digit==null): //不改变值,只转换为数字
fdb_tmp = fdb_tmp;
break;
case (ai_digit==0): //取得整数
fdb_tmp = Math.round(fdb_tmp);
break;
case (ai_digit>0): //按照传入的小数点位数四舍五入取值
for (var i=0;i<ai_digit;i++) fs_digit +="0";
fi_digit = parseInt(fs_digit);
fdb_tmp = Math.round(fdb_tmp * fi_digit) / fi_digit;
if (as_type=="str")
{
fs_tmp1 = fdb_tmp.toString();
fs_tmp1 +=((fs_tmp1.indexOf(".")!=-1)?"":".") + fs_digit.substr(1);
fi_pos = fs_tmp1.indexOf(".") + 1 + ai_digit;
fdb_tmp = fs_tmp1.substr(0,fi_pos);
}
break;
}
return fdb_tmp;
} --------------------编程问答-------------------- 我一般都用LABVIEW的控件AxCWGraph绘图 --------------------编程问答-------------------- LABVIEW的控件AxCWGraph绘图,这方面的资料有没？谢谢大侠！
补充：.NET技术 , C#
