zoukankan      html  css  js  c++  java
  • 用asp+vml实现的立体统计图(一)直方图



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


































    柱 状 统 计 图
    2500
    2000
    1500
    1000
    500
    200
    项目1
    800
    项目2
    1004
    项目3
    600
    项目4
    1222
    项目5
    2100
    项目6
    80
    项目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)
    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

    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;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;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;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;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&";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 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)&";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)&";"&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;"&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> "
    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>
    </head>
    <body>

    <%
    dim total(10,2)

    total(1,1)=200
    total(2,1)=800
    total(3,1)=1004
    total(4,1)=600
    total(5,1)=1222
    total(6,1)=2100
    total(7,1)=80
    total(8,1)=1002
    total(9,1)=145
    total(10,1)=1040

    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,240,200,700,400,"柱 状 统 计 图","","元")
    %>

    </body>
    </html>

  • 相关阅读:
    编程语言
    信安导论2020-2021上第九周总结(20201222)
    链节
    如何学好编程
    第八周学习总结(20201222)信安导论2020-2021上
    实现进制转化伪代码
    fibnacci数列递归实现
    求最大公约数伪代码
    20201332 熟悉编程语言
    如何学好编程(20201332)
  • 原文地址:https://www.cnblogs.com/yechuan/p/222964.html
Copyright © 2011-2022 走看看