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>

  • 相关阅读:
    c语言中编写标准身高体重对照表
    c语言实现约数的枚举
    c语言中循环输出1234567890
    c语言中为九九乘法增加横纵标题
    c语言中多重循环
    c语言中绘制金字塔
    c语言中双重循环
    c语言中绘制长方形
    当当网代码1
    当当网代码4
  • 原文地址:https://www.cnblogs.com/yechuan/p/222961.html
Copyright © 2011-2022 走看看