VML 编程　(JavaScript)

创建XMLHttpRequest对象：

var request = false;

try {

request = new XMLHttpRequest();

} catch (trymicrosoft) {

try {

request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (othermicrosoft) {

try {

request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (failed) {

request = false;

}

if (!request)

alert("Error initializing XMLHttpRequest!");

</script>

AJAX精彩文章：

http://www-128.ibm.com/developerworks/cn/xml/ajax/?S_TACT=105AGX52&S_CMP=techcsdn

VML - 折线图

<%@ Page language="c#" Codebehind="VML-Line.aspx.cs" AutoEventWireup="false" Inherits="Test_CSharp.VML.VML_Line" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

v\:* {}{ BEHAVIOR: url(#default#vml) }

</style>

//---------------VML chart-------------------------

var objRoot,VerSplitLen,HorSplitLen;

var intVerSplitAmt,MaxAmount,MinAmount;

var aryDetail = new Array();

var aryHorizon = new Array();

var nodeList = new Array();

var HorSplitNum;

var uniqueID = 0;

function showChart()

{

//查询并得到数据的XML形式到变量 sXml 中

/**//*var objhttp=new ActiveXObject("Microsoft.XMLHTTP");

var url="getXmlData.aspx?sqlFlag=0";

objhttp.open("POST",url,false);

objhttp.send(); */

var sXml=Form1.all.hidXML.value;

if (sXml=="No Record")

{

alert("Sorry, No data!");

return;

}

//得到结果的两个不同的字段值的数组形式

var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");

xmlDoc.loadXML(sXml);

nodeList = xmlDoc.documentElement.selectNodes("//Table1");

for (var i=0;i<nodeList.length;i++)

{

aryHorizon[i]=nodeList[i].childNodes[0].text;

aryDetail[i]=nodeList[i].childNodes[1].text;

}

HorSplitNum=nodeList.length;//横坐标的坐标点个数

var nAmp=HorSplitNum/5;

if (nAmp<1) nAmp = 1;

//先开辟VML图形区域 Group，然后分别划上 X 轴和 Y 轴

//其中，我们选定的坐标原点坐标为 O(0,-0)

var htmlRoof;

htmlRoof = "<v:group id='root_0' style='position:relative;width:500px;height:400px;' coordsize='6000,6000'>"

+ "</v:group>"

Form1.all.Root.innerHTML = htmlRoof;

objRoot = eval("root_0");

//X轴

var line;

line = "<v:line from='0,0' to='7300,0' style='z-index:200;'>"

+ " <v:stroke endarrow='classic' weight='2px' color='#000000'/>"

+ "</v:line>"

objRoot.insertAdjacentHTML("beforeEnd", line);

//Y轴

line = "<v:line from='0,0' to='0,-5500' style='z-index:200;'>"

+ " <v:stroke endarrow='classic' weight='2px' color='#000000'/>"

+ "</v:line>"

objRoot.insertAdjacentHTML("beforeEnd", line);

VerSplitLen = 4800 / 5; //纵坐标分成五分，计算每份的长度

HorSplitLen = 7300 / HorSplitNum; //横坐标分 HorSplitNum 分，计算每份长度

reDrawHorizontal(); //划横坐标的坐标值

reDrawVertical(); //划纵坐标的坐标值

drawChartLines(); //划折线

drawLineDetail(); //划折线交界处的矩形

}

//-----------------------------------------------------------------------------------------------------------------------------

//划横坐标的坐标值以及垂直于 X 轴的虚线( 坐标原点 O:(0,0) )

function reDrawHorizontal()

{

//划横坐标的坐标值

for(var i = 0;i < HorSplitNum;i ++)

{

var width = 300;

var left = 0 + (i * HorSplitLen) - width/2;

var htmlHorSplit;

htmlHorSplit = "<v:shape style='left:" + left + ";top:100;width:" + width + ";height:300;'>"

+ " <v:textbox inset='0,0,0,0'>" + aryHorizon[i] + "</v:textbox>"

+ "</v:shape>";

objRoot.insertAdjacentHTML("beforeEnd", htmlHorSplit);

/**//*将文字竖起来写

<tr>

<td style='layout-flow:vertical-ideographic'>" + aryHorizon[i] + "</td>

</tr>

</table>

上面的方法可以将文字竖起来写*/

}

//划垂直于 X 轴的虚线

for(var i = 1;i < HorSplitNum;i ++)

{

var XPoint = 0 + (i * HorSplitLen);

var line;

line = "<v:line from='"+XPoint+",0' to='"+XPoint+",-5500'>"

+ " <v:stroke dashstyle='dot' opacity='0.45' weight='0.9pt' color='#000000'/>"

+ "</v:line>"

objRoot.insertAdjacentHTML("beforeEnd", line);

}

//-----------------------------------------------------------------------------------------------------------------------------

//划纵坐标的坐标值以及垂直于 Y 轴的虚线

function reDrawVertical()

{

MaxAmount = 0; //用来保存计算出来的纵坐标上数值的最大值，是一个数量值

for(var i=0;i<aryDetail.length;i++)

if(parseFloat(aryDetail[i])>MaxAmount)

MaxAmount = parseFloat(aryDetail[i]);

//我们把纵坐标分成了 5 分，所以计算每一个大概相当于多少个单位量，取整数，数量值

var strVerSplitAmt = new String(MaxAmount / 5).split(".")[0];

if(strVerSplitAmt == "0")

intVerSplitAmt = 1;

else

{

if(strVerSplitAmt.length>=2)

{ //如 123 ，处理后的值为 130

intVerSplitAmt = parseInt((parseInt(strVerSplitAmt.substr(0, 1),10)*10 + (parseInt(strVerSplitAmt.substr(1, 1), 10) + 1)) + MakeZeroArray(strVerSplitAmt.length - 2).join(""), 10);

}

else

{ //如 12 ，处理后的值为 13

intVerSplitAmt = parseInt(strVerSplitAmt, 10) + 1;

}

//划 Y 纵坐标的坐标值( 坐标原点 O:(0,0) )

for (var i = 1; i <= 5; i ++)

{

var height = 200;

var top = 0 - VerSplitLen * i - height/2; //再减去高度的一半，是为了让他看起来是居中的

var htmlVerSplit;

htmlVerSplit = "<v:shape style='width:400;left:-400;top:"+top+";height:"+height+"'>"

+ " <v:textbox inset='0,0,0,0'>" + NumberFormat(intVerSplitAmt * i,0) + "</v:textbox>"

+ "</v:shape>";

objRoot.insertAdjacentHTML("beforeEnd", htmlVerSplit);

}

//划垂直于 Y 轴的虚线 ( 坐标原点 O:(0,0) )

for (var i = 1; i <= 5; i ++)

{

var YPoint = 0 - VerSplitLen * i;

var line;

line = "<v:line from='0,"+YPoint+"' to='7300,"+YPoint+"'>"

+ " <v:stroke dashstyle='dot' opacity='0.45' weight='0.9pt' color='#000000'/>"

+ "</v:line>";

objRoot.insertAdjacentHTML("beforeEnd", line);

}

//-----------------------------------------------------------------------------------------------------------------------------

//划折线( 坐标原点 O:(0,0) )

function drawChartLines()

{

for(var m = 0;m < aryDetail.length-1;m ++)

{

var fromXPonit = 0 + HorSplitLen * m ;

var toXPoint = 0 + HorSplitLen *(m+1) ;

var fromYPoint = 0 -(aryDetail[m] * VerSplitLen / intVerSplitAmt) ; //注释：长度值 = 数量*长度/数量

var toYPoint = 0 -(aryDetail[m+1] * VerSplitLen / intVerSplitAmt) ;

var htmlLine;

htmlLine = "<v:line from='" + fromXPonit + "," + fromYPoint + "'"

+ " to ='" + toXPoint + "," + toYPoint + "' style='z-index:103;'>"

+ " <v:stroke on='true' weight='1pt' color='#0000ff''/>"

+ "</v:line>" ;

objRoot.insertAdjacentHTML("beforeEnd", htmlLine);

}

//-----------------------------------------------------------------------------------------------------------------------------

//划折线交界处的矩形( 坐标原点 O:(0,0) )

function drawLineDetail()

{

for(var m = 0;m < aryDetail.length;m ++)

{

var height = 150;

var width = 150;

var Top = 0 -(aryDetail[m] * VerSplitLen / intVerSplitAmt) - height/2 ; //转折点纵坐标减去 1/2 高度

var left = 0 + m * HorSplitLen - width/2 ; //转折点横坐标减去 1/2 宽度

var title = "Time: " + aryHorizon[m] + "\nQty: " + aryDetail[m]

var htmlLineDetail ;

htmlLineDetail = "<v:rect style='top:"+Top+";left:"+left+";height:"+height+";width:"+width+";cursor:hand;' title='"+title+"'"

+ " fillcolor='#ff0000' filled='T' strokecolor='green' stroked='T' onclick=alert('"+aryDetail[m]+"');>"

+ "</v:rect>";

objRoot.insertAdjacentHTML("beforeEnd", htmlLineDetail);

}

//---------------------------------------------------------------------------------------------------------------

//Make a zero list array by setting length.

function MakeZeroArray(intArrayLength) {

var aryZeroArray = new Array();

for(var i = 0;i < intArrayLength;i ++)

aryZeroArray[i] = 0;

return aryZeroArray;

}

function NumberFormat(value,num) //四舍五入

{

var a_str = adv_format(value,num);

var a_int = parseFloat(a_str);

if (value.toString().length>a_str.length)

{

var b_str = value.toString().substring(a_str.length,a_str.length+1)

var b_int = parseFloat(b_str);

if (b_int<5)

{

return a_str

}

else

{

var bonus_str,bonus_int;

if (num==0)

{

bonus_int = 1;

}

else

{

bonus_str = "0."

for (var i=1; i<num; i++)

bonus_str+="0";

bonus_str+="1";

bonus_int = parseFloat(bonus_str);

}

a_str = adv_format(a_int + bonus_int, num)

}

return a_str;

}

function adv_format(value,num) //直接去尾

{

var a,b,c,i

a = value.toString();

b = a.indexOf('.');

c = a.length;

if (num==0)

{

if (b!=-1)

a = a.substring(0,b);

}

else

{

if (b==-1)

{

a = a + ".";

for (i=1;i<=num;i++)

a = a + "0";

}

else

{

a = a.substring(0,b+num+1);

for (i=c;i<=b+num;i++)

a = a + "0";

}

return a;

}

</script>

</HEAD>

<TABLE id="tblChart0" style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 16px" cellSpacing="0"

cellPadding="0" width="800" align="center" border="0">

<tr>

</td>

</tr>

<TR>

</TR>

<TR>

</TR>

<tr>

<td height="50" valign="bottom" align="center"><a href="VML-Rect.aspx">查看柱状图</a></td>

</tr>

</TABLE>

<br>

</form>

</body>

</HTML>

VML - 柱状图

<%@ Page language="c#" Codebehind="VML-Rect.aspx.cs" AutoEventWireup="false" Inherits="Test_CSharp.VML.VML_Rect" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

v\:* {}{ BEHAVIOR: url(#default#vml) }

</style>

//---------------VML chart-------------------------

var objRoot,VerSplitLen,HorSplitLen;

var intVerSplitAmt,MaxAmount,MinAmount;

var aryDetail = new Array();

var aryHorizon = new Array();

var nodeList = new Array();

var HorSplitNum;

var uniqueID = 0;

function showChart()

{

//查询并得到数据的XML形式到变量 sXml 中

var objhttp=new ActiveXObject("Microsoft.XMLHTTP");

var url="getXmlData.aspx?sqlFlag=0";

objhttp.open("POST",url,false);

objhttp.send();

var sXml=objhttp.responseText;

if (sXml=="No Record")

{

alert("Sorry, No data!");

return;

}

//得到结果的两个不同的字段值的数组形式

var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");

xmlDoc.loadXML(sXml);

nodeList = xmlDoc.documentElement.selectNodes("//Table1");

for (var i=0;i<nodeList.length;i++)

{

aryHorizon[i]=nodeList[i].childNodes[0].text;

aryDetail[i]=nodeList[i].childNodes[1].text;

}

HorSplitNum=nodeList.length;//横坐标的坐标点个数

var nAmp=HorSplitNum/5; //nAmp只是一个系数，因为水平方向画的矩形的多少可以不同，所以宽度要动态改变

if (nAmp<1) nAmp = 1; //因此 nAmp 给定了一个改变宽度的大概的比例系数而已。

//先开辟VML图形区域 Group，然后分别划上 X 轴和 Y 轴

//其中，我们选定的坐标原点坐标为 O(0,-0)

var htmlRoof;

htmlRoof = "<v:group id='root_0' style='position:relative;width:500px;height:400px;' coordsize='6000,6000'>"

+ "</v:group>"

Form1.all.Root.innerHTML = htmlRoof;

objRoot = eval("root_0");

//X轴

var line;

line = "<v:line from='0,0' to='7300,0' style='z-index:200;'>"

+ " <v:stroke endarrow='classic' weight='2px' color='#000000'/>"

+ "</v:line>"

objRoot.insertAdjacentHTML("beforeEnd", line);

//Y轴

line = "<v:line from='0,0' to='0,-5500' style='z-index:200;'>"

+ " <v:stroke endarrow='classic' weight='2px' color='#000000'/>"

+ "</v:line>"

objRoot.insertAdjacentHTML("beforeEnd", line);

VerSplitLen = 4800 / 5; //纵坐标分成五分，计算每份的长度

HorSplitLen = 7300 / HorSplitNum; //横坐标分 HorSplitNum 分，计算每份长度

reDrawHorizontal(); //划横坐标的坐标值

reDrawVertical(); //划纵坐标的坐标值

drawLineDetail(nAmp); //划折线

}

//-----------------------------------------------------------------------------------------------------------------------------

//划横坐标的坐标值以及垂直于 X 轴的虚线( 坐标原点 O:(0,0) )

function reDrawHorizontal()

{

//划横坐标的坐标值

for(var i = 0;i < HorSplitNum;i ++)

{

var width = 300;

var left = 0 + (i+0.5) * HorSplitLen - width/2;

var htmlHorSplit;

htmlHorSplit = "<v:shape style='left:" + left + ";top:100;width:" + width + ";height:300;'>"

+ " <v:textbox inset='0,0,0,0'>" + aryHorizon[i] + "</v:textbox>"

+ "</v:shape>";

objRoot.insertAdjacentHTML("beforeEnd", htmlHorSplit);

/**//*将文字竖起来写

<tr>

<td style='layout-flow:vertical-ideographic'>" + aryHorizon[i] + "</td>

</tr>

</table>

上面的方法可以将文字竖起来写*/

}

//划垂直于 X 轴的虚线

for(var i = 1;i < HorSplitNum;i ++)

{

var XPoint = 0 + (i * HorSplitLen);

var line;

line = "<v:line from='"+XPoint+",0' to='"+XPoint+",-5500'>"

+ " <v:stroke dashstyle='dot' opacity='0.45' weight='0.9pt' color='#000000'/>"

+ "</v:line>"

objRoot.insertAdjacentHTML("beforeEnd", line);

}

//-----------------------------------------------------------------------------------------------------------------------------

//划纵坐标的坐标值以及垂直于 Y 轴的虚线

function reDrawVertical()

{

MaxAmount = 0; //用来保存计算出来的纵坐标上数值的最大值，是一个数量值

for(var i=0;i<aryDetail.length;i++)

if(parseFloat(aryDetail[i])>MaxAmount)

MaxAmount = parseFloat(aryDetail[i]);

//我们把纵坐标分成了 5 分，所以计算每一个大概相当于多少个单位量，取整数，数量值

var strVerSplitAmt = new String(MaxAmount / 5).split(".")[0];

if(strVerSplitAmt == "0")

intVerSplitAmt = 1;

else

{

if(strVerSplitAmt.length>=2)

{ //如 123 ，处理后的值为 130

intVerSplitAmt = parseInt((parseInt(strVerSplitAmt.substr(0, 1),10)*10 + (parseInt(strVerSplitAmt.substr(1, 1), 10) + 1)) + MakeZeroArray(strVerSplitAmt.length - 2).join(""), 10);

}

else

{ //如 12 ，处理后的值为 13

intVerSplitAmt = parseInt(strVerSplitAmt, 10) + 1;

}

//划 Y 纵坐标的坐标值( 坐标原点 O:(0,0) )

for (var i = 1; i <= 5; i ++)

{

var height = 200;

var top = 0 - VerSplitLen * i - height/2; //再减去高度的一半，是为了让他看起来是居中的

var htmlVerSplit;

htmlVerSplit = "<v:shape style='width:400;left:-400;top:"+top+";height:"+height+"'>"

+ " <v:textbox inset='0,0,0,0'>" + NumberFormat(intVerSplitAmt * i,0) + "</v:textbox>"

+ "</v:shape>";

objRoot.insertAdjacentHTML("beforeEnd", htmlVerSplit);

}

//划垂直于 Y 轴的虚线 ( 坐标原点 O:(0,0) )

for (var i = 1; i <= 5; i ++)

{

var YPoint = 0 - VerSplitLen * i;

var line;

line = "<v:line from='0,"+YPoint+"' to='7300,"+YPoint+"'>"

+ " <v:stroke dashstyle='dot' opacity='0.45' weight='0.9pt' color='#000000'/>"

+ "</v:line>";

objRoot.insertAdjacentHTML("beforeEnd", line);

}

//-----------------------------------------------------------------------------------------------------------------------------

//划柱子( 坐标原点 O:(0,0) )

function drawLineDetail(intAmp)

{

for(var m = 0;m < aryDetail.length;m ++)

{ // intAmp 给定了一个大概的矩形宽度的比例系数

var intWidth = 300/intAmp + 50;

var intHeight= aryDetail[m] * VerSplitLen / intVerSplitAmt

var top = 0 - intHeight;

var left = 0 + (m+0.5) * HorSplitLen - intWidth/2; //我们让矩形落在每分的中间

var title = aryHorizon[m] + ": " + aryDetail[m];

var htmlRect; //划柱子

htmlRect = "<v:rect style='top:" + top + ";left:" + left + ";height:" + intHeight + ";width:" + intWidth + ";'"

+ " fillcolor='#0000ff' filled='T' title='" + title + "'"

+ " strokecolor='#000000' stroked='T' style='cursor:hand' onclick=alert('" + aryDetail[m] + "')>"

+ "</v:rect>"

objRoot.insertAdjacentHTML("beforeEnd", htmlRect);

var htmlDesc; //在柱子上面写注释

htmlDesc = "<v:shape style='top:"+ (top - 300) + ";left:"+ left + ";height:300;width:" + intWidth +";'>"

+ " <div style='z-index:200;height:15px;border:1px solid #C670C6;background-color:#FBD9FB;'>"

+ " <font style='FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial'>"+NumberFormat(aryDetail[m],0)+"</font>"

+ " </div>"

+ "</v:shape>";

objRoot.insertAdjacentHTML("beforeEnd", htmlDesc);

}

//---------------------------------------------------------------------------------------------------------------

//Make a zero list array by setting length.

function MakeZeroArray(intArrayLength) {

var aryZeroArray = new Array();

for(var i = 0;i < intArrayLength;i ++)

aryZeroArray[i] = 0;

return aryZeroArray;

}

function NumberFormat(value,num) //四舍五入

{

var a_str = adv_format(value,num);

var a_int = parseFloat(a_str);

if (value.toString().length>a_str.length)

{

var b_str = value.toString().substring(a_str.length,a_str.length+1)

var b_int = parseFloat(b_str);

if (b_int<5)

{

return a_str

}

else

{

var bonus_str,bonus_int;

if (num==0)

{

bonus_int = 1;

}

else

{

bonus_str = "0."

for (var i=1; i<num; i++)

bonus_str+="0";

bonus_str+="1";

bonus_int = parseFloat(bonus_str);

}

a_str = adv_format(a_int + bonus_int, num)

}

return a_str;

}

function adv_format(value,num) //直接去尾

{

var a,b,c,i

a = value.toString();

b = a.indexOf('.');

c = a.length;

if (num==0)

{

if (b!=-1)

a = a.substring(0,b);

}

else

{

if (b==-1)

{

a = a + ".";

for (i=1;i<=num;i++)

a = a + "0";

}

else

{

a = a.substring(0,b+num+1);

for (i=c;i<=b+num;i++)

a = a + "0";

}

return a;

}

</script>

</HEAD>

<TABLE id="tblChart0" style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 16px" cellSpacing="0"

cellPadding="0" width="800" align="center" border="0">

<tr>

</td>

</tr>

<TR>

</TR>

<TR>

</TR>

<tr>

<td height=50 valign=bottom align=center><a href=VML-Line.aspx>查看折线图</a></td>

</tr>

</TABLE>

</form>

</body>

</HTML>

posted on 2005-08-12 12:19 Sunny 阅读(1620) 评论(2) 编辑收藏举报

刷新页面返回顶部

Sunny's Technology Blog

公告