昨天发了个JAVASCRIPT版的VML折线图,今天再发个ASP版的.感觉网上的文章大都是照抄别人的,而且还不去自己验证,这样误导了很多读者.这里我发些自己测试过而且是自己写的文章,希望对大家能有所帮助吧.不明白的可以在我博客留言或者来我的小站交流:http://www.duku123.com
先说代码:
| <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <STYLE> v/:* { Behavior: url(#default#VML) } </STYLE> </head> <body> <v:group style=" width:500;height:300;" coordsize='1200,500'> <!--背景--> <v:rect style="width:1250;height:500" fillcolor='white'> <v:shadow on="t" offset="5px,5px" type='single' color='silver'/> </v:rect> <!--标题--> <v:rect style="width:1195;height:50;left:5;top:5" stroked="f"> <v:TextBox style="text-align:center;font-size:14px;font-weight:blod"><a href="http://www.duku123.com" target="_blank">asp版折线图--独孤剑</a></v:TextBox> </v:rect> <!--曲线图开始--> <v:group style="width:1100;height:400;left:60;top:70;" coordsize='1100,400' coordorig='0,400'> <v:rect style="width:1100;height:400" strokecolor='#ccc'></v:rect> <!--画横坐标--> <%for i=1 to 40%> <v:line from="0,<%=i*10%>" to="1100,<%=i*10%>"> <%if i=20 then%> <v:stroke color='#F90' /> <%elseif i mod 10=0 then%> <v:stroke color='#ccc' /> <%else%> <v:stroke color='#ccc' dashStyle="shortdash" /> <%end if%> </v:line> <%next%> <!--画纵向坐标--> <%for i=1 to 10%> <v:line from="<%=i*100%>,0" to="<%=i*100%>,400"> <%if i=5 then%> <v:stroke color="#f90" /> <%elseif i mod 3=0 then%> <v:stroke color="#ccc" /> <%else%> <v:stroke color='#ccc' dashStyle="shortdash" /> <%end if%> </v:line> <%next%> <!--标横坐标--> <%for i=0 to 11%> <v:shape style="left:<%=i*100%>;top:400;width:80;height:50"><%=i+1%>月</v:shape> <%next%> <!--标纵坐标--> <%for i=0 to 40%> <%if i mod 10=0 then%> <v:shape style="left:-60;top:<%=i*10%>;width:100;height:50;position:absolute;"><%=400-i*10%></v:shape> <%end if%> <%next%> <!--画折线--> <% p="0,300,100,270,200,210,300,290,400,312,500,312,600,250,700,168,800,213,900,156,1000,200,1100,220" ap=split(p,",")%> <v:polyline style="z-index:11;" strokecolor="green" strokeweight='1px' filled="f" points=<%=p%> /> <!--画坐标点--> <%for i=0 to 11%> <v:rect id="<%=i%>" style="width:8;height:8;position:absolute;left:<%=ap(i*2)-4%>;top:<%=ap(i*2+1)-4%>;" fillcolor='red' stroked='f' /> <v:shape style="width:80;height:30;left:<%=ap(i*2)+10%>;top:<%=ap(i*2+1)-10%>" ><%=ap(2*i+1)%></v:shape> <%next%> </v:group> <v:/group> </body> </html> |
代码里我有详细的注释说明.大家应该能看明白的.最后给出运行的截图:
------------------独孤剑
2008-5-30
欢迎大家来我的小站交流:http://www.duku123.com
285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
