zoukankan      html  css  js  c++  java
  • 纯ASP结合VML生成完美图折线图

    方法一
    <%dim total(7,3) 
    total(1,0)="中国经营报" 
    total(2,0)="招聘网" 
    total(3,0)="51Job" 
    total(4,0)="新民晚报" 
    total(5,0)="新闻晚报" 
    total(6,0)="南方周末" 
    total(7,0)="羊城晚报" 

    total(0,1)="#FF0000,1.5,1,2,公司1"'参数1线条的颜色,参数2线条的宽度,参数3线条的类型,参数4转折点的类型,参数5线条名称 
    total(1,1)=200 
    total(2,1)=1200 
    total(3,1)=900 
    total(4,1)=600 
    total(5,1)=1222 
    total(6,1)=413 
    total(7,1)=800 

    total(0,2)="#0000FF,1,2,3,公司2" 
    total(1,2)=400 
    total(2,2)=500 
    total(3,2)=1040 
    total(4,2)=1600 
    total(5,2)=522 
    total(6,2)=813 
    total(7,2)=980 

    total(0,3)="#004D00,1,1,3,公司3" 
    total(1,3)=900 
    total(2,3)=890 
    total(3,3)=1240 
    total(4,3)=1300 
    total(5,3)=722 
    total(6,3)=833 
    total(7,3)=1280 

    %><html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> 
    <!--[if !mso]> 
    <style> 
    v\:* { behavior: url(#default#VML) } 
    o\:* { behavior: url(#default#VML) } 
    .shape { behavior: url(#default#VML) } 
    </style> 
    <![endif]--> 

    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title></title> 
    <style> 
    TD { FONT-SIZE: 9pt} 
    </style></head> 
    <body topmargin=5 leftmargin=0 scroll=AUTO> 
    <%call table2(total,100,90,600,250,3)%> 
    </body> 
    </html> 

    <% 
    function table2(total,table_x,table_y,all_width,all_height,line_no) 
    '参数含义(传递的数组,横坐标,纵坐标,图表的宽度,图表的高度,折线条数) 
    '纯ASP代码生成图表函数2——折线图 
    '作者:龚鸣(Passwordgm) QQ:25968152 MSN:passwordgm@sina.com Email:passwordgm@sina.com 
    '本人非常愿意和ASP,VML,FLASH的爱好者在HTTP://topclouds.126.com进行交流和探讨 
    '版本1.0 最后修改日期 2003-8-11 
    '非常感谢您使用这个函数,请您使用和转载时保留版权信息,这是对作者工作的最好的尊重。 

    line_color="#69f" 
    left_width=70 
    total_no=ubound(total,1) 

    temp1=0 
    for i=1 to total_no 
    for j=1 to line_no 
    if temp1<total(i,j) then temp1=total(i,j) 
    next 
    next 
    temp1=int(temp1) 
    if temp1>9 then 
    temp2=mid(cstr(temp1),2,1) 
    if temp2>4 then 
    temp3=(int(temp1/(10^(len(cstr(temp1))-1)))+1)*10^(len(cstr(temp1))-1) 
    else 
    temp3=(int(temp1/(10^(len(cstr(temp1))-1)))+0.5)*10^(len(cstr(temp1))-1) 
    end if 
    else 
    if temp1>4 then temp3=10 else temp3=5 
    end if 
    temp4=temp3 
    response.write "<v:rect id='_x0000_s1027' alt='' style='position:absolute;left:"&table_x+left_width&"px;top:"&table_y&"px;"&all_width&"px;height:"&all_height&"px;z-index:-1' fillcolor='#9cf' stroked='f'><v:fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:rect>" 
    for i=0 to all_height-1 step all_height/5 
    response.write "<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='"&table_x+left_width+length&"px,"&table_y+all_height-length-i&"px' to='"&table_x+all_width+left_width&"px,"&table_y+all_height-length-i&"px' strokecolor='"&line_color&"'/>" 
    response.write "<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='"&table_x+(left_width-15)&"px,"&table_y+i&"px' to='"&table_x+left_width&"px,"&table_y+i&"px'/>" 
    response.write "" 
    response.write "<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:"&table_x&"px;top:"&table_y+i&"px;"&left_width&"px;height:18px;z-index:1'>" 
    response.write "<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='right'>"&temp4&"</td></tr></table></v:textbox></v:shape>" 
    temp4=temp4-temp3/5 
    next 
    response.write "<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='"&table_x+left_width&"px,"&table_y+all_height&"px' to='"&table_x+all_width+left_width&"px,"&table_y+all_height&"px'/>" 
    response.write "<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='"&table_x+left_width&"px,"&table_y&"px' to='"&table_x+left_width&"px,"&table_y+all_height&"px'/>" 

    dim line_code 
    redim line_code(line_no,5) 
    for i=1 to line_no 
    line_temp=split(total(0,i),",") 
    line_code(i,1)=line_temp(0) 
    line_code(i,2)=line_temp(1) 
    line_code(i,3)=line_temp(2) 
    line_code(i,4)=line_temp(3) 
    line_code(i,5)=line_temp(4) 
    next 
    for j=1 to line_no 
    for i=1 to total_no-1 
    x1=table_x+left_width+all_width*(i-1)/total_no 
    y1=table_y+(temp3-total(i,j))*(all_height/temp3) 
    x2=table_x+left_width+all_width*i/total_no 
    y2=table_y+(temp3-total(i+1,j))*(all_height/temp3) 
    response.write "<v:line id=""_x0000_s1025"" alt="""" style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="""&x1&"px,"&y1&"px"" to="""&x2&"px,"&y2&"px"" coordsize=""21600,21600"" strokecolor="""&line_code(j,1)&""" strokeweight="""&line_code(j,2)&""">" 
    select case line_code(j,3) 
    case 1 
    case 2 
    response.write "<v:stroke dashstyle='1 1'/>" 
    case 3 
    response.write "<v:stroke dashstyle='dash'/>" 
    case 4 
    response.write "<v:stroke dashstyle='dashDot'/>" 
    case 5 
    response.write "<v:stroke dashstyle='longDash'/>" 
    case 6 
    response.write "<v:stroke dashstyle='longDashDot'/>" 
    case 7 
    response.write "<v:stroke dashstyle='longDashDotDot'/>" 
    case else 
    end select 
    response.write "</v:line>"&CHR(13) 
    select case line_code(j,4) 
    case 1 
    case 2 
    response.write "<v:rect id=""_x0000_s1027"" style='position:absolute;left:"&x1-2&"px;top:"&y1-2&"px;4px;height:4px; z-index:2' fillcolor="""&line_code(j,1)&""" strokecolor="""&line_code(j,1)&"""/>"&CHR(13) 
    case 3 
    response.write "<v:oval id=""_x0000_s1026"" style='position:absolute;left:"&x1-2&"px;top:"&y1-2&"px;4px;height:4px;z-index:1' fillcolor="""&line_code(j,1)&""" strokecolor="""&line_code(j,1)&"""/>"&CHR(13) 
    end select 
    next 
    select case line_code(j,4) 
    case 1 
    case 2 
    response.write "<v:rect id=""_x0000_s1027"" style='position:absolute;left:"&x2-2&"px;top:"&y2-2&"px;4px;height:4px; z-index:2' fillcolor="""&line_code(j,1)&""" strokecolor="""&line_code(j,1)&"""/>"&CHR(13) 
    case 3 
    response.write "<v:oval id=""_x0000_s1026"" style='position:absolute;left:"&x2-2&"px;top:"&y2-2&"px;4px;height:4px;z-index:1' fillcolor="""&line_code(j,1)&""" strokecolor="""&line_code(j,1)&"""/>"&CHR(13) 
    end select 
    next 

    for i=1 to total_no 
    response.write "<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='"&table_x+left_width+all_width*(i-1)/total_no&"px,"&table_y+all_height&"px' to='"&table_x+left_width+all_width*(i-1)/total_no&"px,"&table_y+all_height+15&"px'/>" 
    response.write "" 
    response.write "<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:"&table_x+left_width+all_width*(i-1)/total_no&"px;top:"&table_y+all_height&"px;"&all_width/total_no&"px;height:18px;z-index:1'>" 
    response.write "<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>"&total(i,0)&"</td></tr></table></v:textbox></v:shape>" 
    next 

    tb_height=30 
    response.write "<v:rect id='_x0000_s1025' style='position:absolute;left:"&table_x+all_width+20&"px;top:"&table_y&"px;100px;height:"&line_no*tb_height+20&"px;z-index:1'/>" 
    for i=1 to line_no 
    response.write "<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:"&table_x+all_width+25&"px;top:"&table_y+10+(i-1)*tb_height&"px;60px;height:"&tb_height&"px;z-index:1'>" 
    response.write "<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>"&line_code(i,5)&"</td></tr></table></v:textbox></v:shape>" 
    response.write "<v:rect id='_x0000_s1040' alt='' style='position:absolute;left:"&table_x+all_width+80&"px;top:"&table_y+10+(i-1)*tb_height+4&"px;30px;height:20px;z-index:1' fillcolor='"&line_code(i,1)&"'><v:fill color2='"&line_code(i,1)&"' rotate='t' focus='100%' type='gradient'/></v:rect>" 
    next 

    end function 
    %>
    方法二:

    <%
    '不要修改以下数据,除非你知道你在做什么
    '#####################################

    Height=200  '//图表高度
    Width=600   '//图表宽度

    posX=390-Width/2  '//相对浏览器的X位置
    posY=70           '//相对浏览器的Y位置

    scaleX=50  '//最好为Width值的倍数
    scaleY=50  '//最好为Height值的倍数

    countX=Cint(Width/scaleX)
    countY=Cint(Height/scaleY)

    data="50,50|100,120|200,150|300,50|450,100"  '//要输入折线的点阵(竖线分隔每个组,逗号分隔每个组中的X和Y值)

    TempData=Split(data,"|")
    TempDataCount=UBound(TempData)+1


    %>

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <!--Coding By PYPStudio-->
    <title>折线图生成</title>
    <style type="text/css">
    <!--
    .upperLine {
    border-bottom- 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-color: #FF0000;
    }
    -->
    </style>
    </head>

    <body>
    <table width="80%"  border="0" align="center" cellpadding="0" cellspacing="1" class="upperLine">
      <tr>
        <td height="30" align="center"><h2><strong>折线图标题</strong></h2></td>
      </tr>
    </table>
    <!--生成折线图开始-->

    <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
            <!--[if !mso]>
    <style>
    v\:*         { behavior: url(#default#VML) }
    o\:*         { behavior: url(#default#VML) }
    .shape       { behavior: url(#default#VML) }
    </style>
    <![endif]-->
            <style>
    TD { FONT-SIZE: 9pt}
    </style>

    <!--总体框架-->
    <v:rect style='position:absolute;left:<%=posX%>px;top:<%=posY%>px;<%=Width%>px;height:<%=Height%>px;z-index:-1' fillcolor='#9cf' stroked='f'>
      <v:fill rotate='t' angle='-45' focus='100%' />
    </v:rect>
    <!--X轴-->
    <v:line style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='<%=posX%>px,<%=posY+Height%>px' to='<%=posX+Width%>px,<%=posY+Height%>px'/>
    <!--Y轴-->
    <v:line style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='<%=posX%>px,<%=posY%>px' to='<%=posX%>px,<%=posY+Height%>px'/>

    <!--X轴刻度-->
    <% For i=1 to countX+1 %>
    <v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='<%=posX+(i-1)*scaleX%>px,<%=posY+Height%>px' to='<%=posX+(i-1)*scaleX%>px,<%=posY+Height+5%>px' strokecolor='#000000'/>
    <v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:<%=posX+(i-1)*scaleX-10%>px;top:<%=posY+Height+5%>px;70px;height:18px;z-index:1'>
    <v:textbox inset='0px,0px,0px,0px'>
    <table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'><%=(i-1)*scaleX%></td></tr></table>
    </v:textbox>
    </v:shape>
    <% Next %>

    <!--Y轴刻度-->
    <% For i=1 to countY+1 %>
    <v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='<%=posX-5%>px,<%=posY+Height-(i-1)*scaleY%>px' to='<%=posX+Width%>px,<%=posY+Height-(i-1)*scaleY%>px' strokecolor='#000000'/>
    <% if i<>1 then %>
    <v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:<%=posX-30%>px;top:<%=posY+Height-(i-1)*scaleY-10%>px;70px;height:18px;z-index:1'>
    <v:textbox inset='0px,0px,0px,0px'>
    <table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'><%=(i-1)*scaleY%></td></tr></table>
    </v:textbox>
    </v:shape>
    <% End if %>
    <% Next %>

    <!--画点连线-->

    <% For i=0 to TempDataCount %>
    <% if i=0 then %>
    <% showDataI=split(TempData(i),",") %>
    <v:line style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="<%=posX%>px,<%=posY+Height%>px" to="<%=posX+showDataI(0)%>px,<%=posY+Height-showDataI(1)%>px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <% Else %>
    <% showDataI=split(TempData(i-1),",") %>
    <% If i<>TempDataCount then %>
    <% showDataII=split(TempData(i),",") %>
    <% Else %>
    <% showDataII=split(TempData(i-1),",") %>
    <% End if %>
    <!--第 【<%=i%>】 条线-->
    <v:oval style='position:absolute;left:<%=posX+showDataI(0)%>px;top:<%=posY+Height-showDataI(1)%>px;4px;height:4px;z-index:1' fillcolor="#FF0000" strokecolor="#FF0000"/>
    <v:line style='position:absolute;left:0;text-align:left;top:0;z-index:1' from="<%=posX+showDataI(0)%>px,<%=posY+Height-showDataI(1)%>px" to="<%=posX+showDataII(0)%>px,<%=posY+Height-showDataII(1)%>px" coordsize="21600,21600" strokecolor="#FF0000" strokeweight="1.5"></v:line>
    <v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:<%=posX+showDataI(0)%>px;top:<%=posY+Height-showDataI(1)%>px;100px;height:18px;z-index:5'>
      <v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>(<%=showDataI(0)%>,<%=showDataI(1)%>)</td></tr></table>
      </v:textbox>
    </v:shape>
    <% End if %>
    <% Next %>

    </body>
    </html>

  • 相关阅读:
    Sql Server 2008卸载后再次安装一直报错
    listbox 报错 Cannot have multiple items selected when the SelectionMode is Single.
    Sql Server 2008修改Sa密码
    学习正则表达式
    Sql Server 查询第30条数据到第40条记录数
    Sql Server 复制表
    Sql 常见面试题
    Sql Server 简单查询 异步服务器更新语句
    jQuery stop()用法以及案例展示
    CSS3打造不断旋转的CD封面
  • 原文地址:https://www.cnblogs.com/yechuan/p/222961.html
Copyright © 2011-2022 走看看