纯ASP结合VML生成完美图-折线图

    技术2022-05-19  20

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

    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-width: 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:<%=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;width: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;width: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;width: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;width: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>

     


    最新回复(0)