当前位置: 王朝网络 >> asp >> 用asp+vml实现的立体统计图（一）-----直方图

用asp+vml实现的立体统计图（一）-----直方图

王朝asp·作者佚名 2006-01-09

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

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

网页上实现动态统计图一直都是很多web程序员感到很头痛的事。经过一段时间对vml的研究，发现要实现html页面上的统计图还是很方便的。现在我就将我用asp+vml实现的立体统计图原码发给大家，希望对大家有所帮助。（如果要转贴请大家还是把我的名字保留下来，毕竟是我花了很多时间的劳动成果哈。：））

首先来个最简单的------直方图

柱状统计图

元

2500

2000

1500

1000

500

200

项目1

800

项目2

1004

项目3

600

项目4

1222

项目5

2100

项目6

项目7

1002

项目8

145

项目9

1040

项目10

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

'┃┃

'┃ 摘要：统计图--直方图 ┃

'┃ 作者：翁云兵┃

'┃ 创建日期：2004年11月5日 ┃

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

'┃┃

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

'参数含义(数组，横坐标，纵坐标，图表的宽度，图表的高度,图表标题，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

num =ubound(stat_array,1)

item_width = cint(20000/num+0.5)

begin_x= cint((item_width-1200)/2)+2200

value_Max=0

for i=1 to num

if value_Max<stat_array(i,1) then value_Max=stat_array(i,1)

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

response.Write "<v:shapetype id='Box' coordsize='21600,21600' o:spt='16' adj='5400'></v:shapetype>"

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 = '23500,12700'>"

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

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: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:11700;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='1200,"&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> "

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 i=1 to num

this_hight = cint(stat_array(i,1)/(5*item_hight)*10000+420)

response.Write " <v:shape id='Box"&i&"' type='#Box' fillcolor='"&bg_color(i)&"' strokecolor='#5f5f5f' style='position:relative; left:"&(i-1)*item_width+begin_x&";top:"&cint(10000-this_hight+1620)&";width:1200;height:"&this_hight&";z-index:10'>"

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

response.Write " </v:shape>"

response.Write " <v:Rect style='position:relative;left:"&(i-1)*item_width+2200&";top:"&cint(10000-this_hight+1150)&";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'>"&stat_array(i,1)&"</div></v:TextBox>"

response.Write " </v:Rect> "

response.Write " <v:Rect style='position:relative;left:"&(i-1)*item_width+2200&";top:11850;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'>"&stat_array(i,2)&"</div></v:TextBox>"

response.Write " </v:Rect> "

response.Write "</v:group>"

end function

<head>

<STYLE>

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

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

</STYLE>

</head>

<body>

dim total(10,2)