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

用asp+vml实现的立体统计图（二）-----饼状图

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

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

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

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

上一篇我们看了直方图，接下来我们看看饼图。网络上我看了一些用vml实现的饼图，这写几乎都是平面的，我这个是立体的加了一些效果，感觉还不错。

三维饼状图

总数:12422元

项目1:2000元

项目2:1800元

项目3:1700元

项目4:1500元

项目5:1222元

项目6:1100元

项目7:1000元

项目8:800元

项目9:700元

项目10:600元

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

'┃┃

'┃ 摘要：统计图--饼图 ┃

'┃ 作者：翁云兵┃

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

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

'┃┃

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

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

function table2(stat_array,table_left,table_top,all_width,all_height,table_title,unit)

dim bg_color(10),pie(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"

num =ubound(stat_array,1)

allvalues=0

for i=1 to num

allvalues = allvalues+stat_array(i,1)

k=0

for i=1 to num-1

pie(i)=formatnumber(stat_array(i,1)/allvalues,4,-1)

k=k+pie(i)

pie(num)=formatnumber((1-k),4,-1)

response.Write "<v:shapetype id='Cake_3D' coordsize='21600,21600' o:spt='95' adj='11796480,5400' path='al10800,10800@0@0@2@14,10800,10800,10800,10800@3@15xe'></v:shapetype>"

response.Write "<v:shapetype id='3dtxt' coordsize='21600,21600' o:spt='136' adj='10800' path='m@7,l@8,m@5,21600l@6,21600e'> "

response.Write " <v:path textpathok='t' o:connecttype='custom' o:connectlocs='@9,0;@10,10800;@11,21600;@12,10800' o:connectangles='270,180,90,0'/>"

response.Write " <v:textpath on='t' fitshape='t'/>"

response.Write " <o:lock v:ext='edit' text='t' shapetype='t'/>"

response.Write "</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 = '21000,11500'>"

response.Write " <v:Rect style='position:relative;left:500;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:500;top:1000;width:20000; height:10000;' onmouseover='movereset(1)' onmouseout='movereset(0)' fillcolor='#9cf' strokecolor='#888888'>"

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

response.Write " </v:rect>"

response.Write " <v:rect id='back' style='position:relative;left:15000;top:1400;width:5000; height:"&((num+1)*9000/11+200)&";' 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>"

response.Write " <v:Rect style='position:relative;left:15500;top:1500;width:4000;height:700' fillcolor='#000000' stroked='f' strokecolor='#000000'>"

response.Write " <v:TextBox inset='8pt,4pt,3pt,3pt' style='font-size:11pt;'><div align='left'><font color='#ffffff'><B>总数:"&allvalues&unit&"</B></font></div></v:TextBox>"

response.Write " </v:Rect> "

for i=1 to num

response.Write " <v:Rect id='rec"&i&"' style='position:relative;left:15400;top:"&i*9000/11+1450&";width:4300;height:800;display:none' 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:15500;top:"&i*9000/11+1500&";width:600;height:700' fillcolor='"&bg_color(i)&"' stroked='f'/>"

response.Write " <v:Rect style='position:relative;left:16300;top:"&i*9000/11+1500&";width:3400;height:700' filled='f' stroked='f'>"

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

response.Write " </v:Rect> "

response.Write "</v:group>"

k1=180

k4=10

for i=1 to num

k2=360*pie(i)/2

k3=k1+k2

if k3>=360 then

k3=k3-360

end if

kkk=(-11796480*pie(i)+5898240)

k5=3.1414926*2*(180-(k3-180))/360

R=all_height/2

txt_x = table_left+all_height/8-30+R+R*sin(k5)*0.7

txt_y = table_top+all_height/14-39+R+R*cos(k5)*0.7*0.5

titlestr = " 名  称："&stat_array(i,2)&"
 数  值："&stat_array(i,1)&unit&"
 所占比例："&pie(i)*100&"%  "

response.Write " <div style='cursor:hand;'>"

response.Write " <v:shape id='cake"&i&"' type='#Cake_3D' title='"&titlestr&"'"

response.Write " style='position:absolute;left:"&table_left+all_height/8&"px;top:"&table_top+all_height/14&"px;WIDTH:"&all_height&"px;HEIGHT:"&all_height&"px;rotation:"&k3&";z-index:"&k4&"'"

response.Write " adj='"&kkk&",0' fillcolor='"&bg_color(i)&"' onmouseover='moveup(cake"&i&","&(table_top+all_height/14)&",txt"&i&",rec"&i&")'; onmouseout='movedown(cake"&i&","&(table_top+all_height/14)&",txt"&i&",rec"&i&");'>"

response.Write " <v:fill opacity='60293f' color2='fill lighten(120)' o:opacity2='60293f' rotate='t' angle='-135' method='linear sigma' focus='100%' type='gradient'/>"

response.Write " <o:extrusion v:ext='view' on='t'backdepth='25' rotationangle='60' viewpoint='0,0'viewpointorigin='0,0' skewamt='0' lightposition='-50000,-50000' lightposition2='50000'/>"

response.Write " </v:shape>"

response.Write " <v:shape id='txt"&i&"' type='#3dtxt' style='position:absolute;left:"&txt_x&"px;top:"&txt_y&"px;z-index:20;display:none;width:50; height:18;' fillcolor='#ffffff'"

response.Write " onmouseover='ontxt(cake"&i&","&(table_top+all_height/14)&",txt"&i&",rec"&i&")'>"

response.Write " <v:fill opacity='60293f' color2='fill lighten(120)' o:opacity2='60293f' rotate='t' angle='-135' method='linear sigma' focus='100%' type='gradient'/>"

response.Write " <v:textpath style='font-family:'宋体';v-text-kern:t' trim='t' fitpath='t' string='"&pie(i)*100&"%'/>"

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

response.Write " </v:shape>"

response.Write " </div>"

k1=k1+k2*2

if k1>=360 then

k1=k1-360

end if

if k1>180 then

k4=k4+1

else

k4=k4-1