ASP+VML实现立体曲线统计图

转载 于 2010-12-01 09:01:00 发布 · 751 阅读 · 0
文章标签：

#asp #textbox #table #function #div #behavior

本文介绍了一种使用VBScript绘制曲线统计图的方法。通过定义函数table1来生成包含多个项目的曲线图，展示了如何设置图表参数、绘制图表元素及实现交互功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<%

'┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

'┃　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　┃

'┃ 摘　要： 统计图--曲线图　　 　　　　　　　　　　　　　　　　 ┃

'┃ 作　者： 翁云兵　　　　　　　　　　　　　　　　　　　　　　　┃

'┃ 创建日期：2004年12月01日　　　　　　　　　　　　　　　　　　┃

'┃ 完成日期：2004年11月03日　　　　　　　　　　　　　　　　　　┃

'┃　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　┃

'┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

'参数含义(数组，横坐标，纵坐标，图表的宽度，图表的高度,图表标题，X轴单位，Y轴单位)

function table1(stat_array,table_left,table_top,all_width,all_height,table_title,X_unit,Y_unit)

dim bg_color(10)

bg_color(1)="#ff1919"

bg_color(2)="#ffff19"

bg_color(3)="#1919ff"

bg_color(4)="#19ff19"

bg_color(5)="#fc0"

bg_color(6)="#3cc"

bg_color(7)="#ff19ff"

bg_color(8)="#993300"

bg_color(9)="#f60"

bg_color(10)="#ff8c19"

 

if X_unit <> "" then

X_unit = X_unit

end if

if Y_unit <> "" then

Y_unit = Y_unit

end if

 

num1 = ubound(stat_array,1) 

line_temp=split(stat_array(0,1),",")

num2 = ubound(line_temp,1)+1

dim line_code

redim line_code(num1,num2)

for j=1 to num2

line_code(0,j) = line_temp(j-1)

next

for i=1 to num1

line_temp = split(stat_array(i,1),",")

line_code(i,0) = stat_array(i,2)

for j=1 to num2

line_code(i,j) = cdbl(line_temp(j-1))

next

next 

value_Max=0

for i=1 to num1

for j=1 to num2

if value_Max<line_code(i,j) then value_Max=line_code(i,j) 

next

next

 

value_Max = cint(value_Max)

value_Max_str =cstr(value_Max) 

if value_Max>9 then

temp=mid(value_Max_str,2,1)

if temp>4 then 

temp2=(int(value_Max/(10^(len(value_Max_str)-1)))+1)*10^(len(value_Max_str)-1)

else

temp2=(int(value_Max/(10^(len(value_Max_str)-1)))+0.5)*10^(len(value_Max_str)-1)

end if

else

if value_Max>4 then temp2=10 else temp2=5

end if

item_hight = temp2/5

 

item_width = 20000/(num2-1)

 

response.Write "<v:rect id='background' style='position:absolute;left:"&table_left&"px;top:"&table_top&"px;WIDTH:"&all_width&"px;HEIGHT:"&all_height&"px;' fillcolor='#EFEFEF' strokecolor='gray'>"

response.Write " <v:shadow on='t' type='single' color='silver' offset='4pt,4pt'/>"

response.Write "</v:rect>"

 

response.Write "<v:group ID='table' style='position:absolute;left:"&table_left&"px;top:"&table_top&"px;WIDTH:"&all_width&"px;HEIGHT:"&all_height&"px;' coordsize = '27500,12800'>"

 

response.Write " <v:Rect style='position:relative;left:1500;top:200;width:23000;height:800'filled='false' stroked='f'>"

response.Write " <v:TextBox inset='0pt,0pt,0pt,0pt'>"

response.Write " <table width='100%' border='0' align='center' cellspacing='0'>"

response.Write " <tr>"

response.Write " <td align='center' valign='middle'><div style='font-size:15pt; font-family:黑体;'><B>"&table_title&"</B></div></td>"

response.Write " </tr>"

response.Write " </table>"

response.Write " </v:TextBox>"

response.Write " </v:Rect> "

 

response.Write " <v:rect id='back' style='position:relative;left:1700;top:1200;width:20500; height:10500;' fillcolor='#9cf' strokecolor='#DFDFDF'>"

response.Write " <v:fill rotate='t' angle='-45' focus='100%' type='gradient'/>"

response.Write " </v:rect>"

 

response.Write " <v:rect id='back2' style='position:relative;left:23000;top:1200;width:4000; height:"&(10500)&";' fillcolor='#9cf' stroked='t' strokecolor='#0099ff'>"

response.Write " <v:fill rotate='t' angle='-175' focus='100%' type='gradient'/>"

response.Write " <v:shadow on='t' type='single' color='silver' offset='3pt,3pt'/>"

response.Write " </v:rect>"

 

for i=1 to num1

if i=1 then

displaystr=""

else

displaystr="none"

end if

response.Write " <div style='cursor:hand;' onmouseover='moveon(rec"&i&",line_"&i&")' onmouseout='moveout(rec"&i&",line_"&i&","&i&")' onclick='clickit("&i&")'>"

response.Write " <v:Rect id='rec"&i&"' style='position:relative;left:23100;top:"&(i-1)*10200/10+1450&";width:3800;height:800;display:"&displaystr&";' fillcolor='#efefef' strokecolor='"&bg_color(i)&"'>"

response.Write " <v:fill opacity='.6' color2='fill darken(118)' o:opacity2='.6' rotate='t' method='linear sigma' focus='100%' type='gradient'/>"

response.Write " </v:Rect>"

response.Write " <v:Rect style='position:relative;left:23200;top:"&(i-1)*10200/10+1500&";width:600;height:700' fillcolor='"&bg_color(i)&"' stroked='f'/>"

response.Write " <v:Rect style='position:relative;left:24000;top:"&(i-1)*10200/10+1500&";width:3400;height:700' filled='f' stroked='f'>"

response.Write " <v:TextBox inset='0pt,4pt,0pt,0pt' style='font-size:9pt;'><div align='left'>"&stat_array(i,2)&"</div></v:TextBox>"

response.Write " </v:Rect> "

response.Write " </div> "

next

 

response.Write " <v:line ID='X' from='1700,11700' to='22700,11700' style='z-index:2' strokecolor='#000000' strokeWeight=1pt><v:stroke EndArrow='Classic'/></v:line>"

response.Write " <v:line ID='Y' from='1700,900' to='1700,11700' style='z-index:2' strokecolor='#000000' strokeWeight=1pt><v:stroke StartArrow='Classic'/></v:line>"

 

response.Write " <v:Rect style='position:relative;left:100;top:700;width:1500;height:500' filled='false' stroked='false'>"

response.Write " <v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;'><div align='right'>"&Y_unit&"</div></v:TextBox>"

response.Write " </v:Rect> " 

response.Write " <v:Rect style='position:relative;left:22200;top:11900;width:2000;height:500' filled='false' stroked='false'>"

response.Write " <v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;'><div align='left'>"&X_unit&"</div></v:TextBox>"

response.Write " </v:Rect> " 

 

for i=0 to 4

response.Write " <v:line from='1300,"&i*2000+1700&"' to='1700,"&i*2000+1700&"' style='z-index:2' strokecolor='#000000'></v:line>"

response.Write " <v:line from='1700,"&i*2000+1700&"' to='2200,"&i*2000+1200&"' style='z-index:2' strokecolor='#0099FF'></v:line>"

response.Write " <v:line from='2200,"&i*2000+1200&"' to='22200,"&i*2000+1200&"' style='z-index:2' strokecolor='#0099FF'></v:line>"

response.Write " <v:line from='2200,"&i*2000+2200&"' to='22200,"&i*2000+2200&"' style='z-index:2' strokecolor='#0099FF'>"

response.Write " <v:stroke dashstyle='Dot'/>"

response.Write " </v:line>"

 

response.Write " <v:Rect style='position:relative;left:100;top:"&i*2000+1250&";width:1500;height:500' filled='false' stroked='false'>"

response.Write " <v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;'><div align='right'>"&item_hight*(5-i)&"</div></v:TextBox>"

response.Write " </v:Rect> " 

next

 

response.Write " <v:line from='2200,11200' to='22200,11200' style='z-index:2' strokecolor='#0099FF'></v:line>"

response.Write " <v:line from='2200,1200' to='2200,11200' style='z-index:2' strokecolor='#0099FF'></v:line>"

response.Write " <v:line from='1700,11700' to='2200,11200' style='z-index:2' strokecolor='#0099FF'></v:line>"

 

for j=0 to num2-1

response.Write " <v:line from='"&j*item_width+1700&",11700' to='"&j*item_width+1700&",12000' style='z-index:2' strokecolor='#000000'></v:line>"

response.Write " <v:line from='"&j*item_width+1700&",11700' to='"&j*item_width+2200&",11200' style='z-index:2' strokecolor='#0099FF'><v:stroke dashstyle='ShortDot'/></v:line>"

response.Write " <v:line from='"&j*item_width+2200&",1200' to='"&j*item_width+2200&",11200' style='z-index:2' strokecolor='#0099FF'><v:stroke dashstyle='ShortDot'/></v:line>"

response.Write " <v:Rect style='position:relative;left:"&j*item_width+1700-item_width/2&";top:12100;width:"&item_width&";height:500' filled='false' stroked='false'>"

response.Write " <v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;'><div align='center'>"&line_code(0,j+1)&"</div></v:TextBox>"

response.Write " </v:Rect> " 

next

for i=1 to num1

if i=1 then

displaystr=""

else

displaystr="none"

end if

response.Write " <div id='line_"&i&"' style='display:"&displaystr&";'>"

for j=0 to num2-2

this_hight1 = cint(line_code(i,j+1)/(5*item_hight)*10000)

this_hight2 = cint(line_code(i,j+2)/(5*item_hight)*10000)

'线条样式

response.Write " <v:line from='"&j*item_width+1850&","&(10000-this_hight1+1550)&"' to='"&(j+1)*item_width+1850&","&(10000-this_hight2+1550)&"'style='z-index:"&i*10&";' strokeweight='0.1pt' strokecolor='"&bg_color(i)&"'>"

response.Write " <o:extrusion v:ext='view' backdepth='2pt' on='t' lightposition='-50000,-50000' lightposition2='50000'/>"

response.Write " </v:line>"

next

response.Write " </div>"

next

 

response.Write "</v:group>" 

end function

%>

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>

<title>曲线统计</title>

 

<STYLE>

v/:* { Behavior: url(#default#VML) }

o/:* { behavior: url(#default#VML) }

</STYLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var showit = new Array(10);

 

function moveon(iteam,lineit){

temp=eval(iteam)

templine=eval(lineit)

if(showit[1]){

rec1.style.display = "";

line_1.style.display = "";

}else{

rec1.style.display = "none";

line_1.style.display = "none";

} 

temp.style.display = "";

templine.style.display = "";

}

function moveout(iteam,lineit,i){

temp=eval(iteam)

templine=eval(lineit)

if (showit[i]){

temp.style.display = "";

templine.style.display = "";

}else{

temp.style.display = "none";

templine.style.display = "none";

}

}

function clickit(i){

if (showit[i]){

showit[i]=false

}else{

showit[i]=true

} 

}

-->

</script>

</head>

<body>

 

<%

dim total(10,2)

 

total(0,1)="1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月"

total(1,1)="200,158,982,0,369,100,595,895,652,25,245,951"

total(2,1)="984,58,495,36,158,486,952,258,653,415,485,14"

total(3,1)="850,988,958,145,369,745,265,158,856,145,425,352"

total(4,1)="600,525,235,485,258,265,158,365,35,148,658,475"

total(5,1)="62,525,635,215,0,465,258,305,66,547,54,148"

total(6,1)="560,625,645,329,158,665,358,95,120,358,42,253"

total(7,1)="950,725,635,435,258,865,458,955,152,845,425,421"

total(8,1)="600,825,155,455,458,265,558,365,352,245,853,122"

total(9,1)="360,925,215,545,658,465,658,845,400,421,541,125"

total(10,1)="50,225,355,655,858,665,758,35,584,214,54,651"

 

total(1,2)="项目1"

total(2,2)="项目2"

total(3,2)="项目3"

total(4,2)="项目4"

total(5,2)="项目5"

total(6,2)="项目6"

total(7,2)="项目7"

total(8,2)="项目8"

total(9,2)="项目9"

total(10,2)="项目10"

 

 

call table1(total,20,20,700,350,"曲 线 统 计 图","时间","元")

%>

 

</body>

</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值