[分享]ASP+VML实现折线图

[复制链接]

ㄣ紸縡のoァ

电梯直达

1^#

发表于 2010-1-7 23:39:47 | 只看该作者回帖奖励

|正序浏览 |阅读模式

呵呵~~ 看到最近大家都在玩这个,所以也把以前的代码修改了一下,然后发上来

效果如下图:

程序代码:

<%
function aspVmlLine(total,table_x,table_y,all_width,all_height,line_no)
'参数含义(传递的数组，横坐标，纵坐标，图表的宽度，图表的高度,折线条数)
'纯ASP代码生成图表函数——折线图
line_color="#f0f0f0"
left_width=100
total_no=ubound(total,1)
temp1=0
if total_no>0 then temp6=total(1,1)
for i=1 to total_no
for j=1 to line_no
if temp1<total(i,j) then temp1=total(i,j) '取最大值
next
next
temp=left(temp1,1)
lent=10^(len(cstr(temp1))-1)
if temp>=0 and tem<=2 then y_step=0.25*lent
if temp>2 and temp<=4 then y_step=0.5*lent
if temp>=5 and temp<=9 then y_step=1*lent
if temp1>9 then
temp2=mid(cstr(temp1),2,1) '取第二位
if temp2>5 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
elseif temp1>=5 then
temp3=temp1+1
elseif temp1>=4 then
temp3=temp1+0.5
else
temp3=temp1+0.25
end if
'temp3=temp1+y_step
temp6=0 '设置最小值
temp4=temp3
response.write "<v:rect id='_x0000_s1027' alt='' style='position:absolute;left:"&table_x+left_width&"px;top:"&table_y&"px;width:"&all_width&"px;height:"&all_height&"px;z-index:-1' fillcolor='#fff' stroked='f'><v:fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:rect>"
'''打印Y轴
for i=0 to all_height step all_height/((temp3-temp6)/y_step)
if temp6>temp1 then
response.write "<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' />"
else
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-i&"px' to='"&table_x+all_width+left_width&"px,"&table_y+all_height-i&"px' strokecolor='"&line_color&"'/>"
end if
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-i&"px' to='"&table_x+left_width&"px,"&table_y+all_height-i&"px'/>" 'table_x+(left_width-x) 控制Y的标点长度
response.write ""
response.write "<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:"&table_x&"px;top:"&table_y+all_height-i-12&"px;width:"&left_width&"px;height:18px;z-index:1'>"
if temp6>temp1 then
response.write "<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='right'> </td></tr></table></v:textbox></v:shape>"
else
response.write "<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='right'>"&FormatNumber(temp6, 2)&"</td></tr></table></v:textbox></v:shape>"
end if
temp6=temp6+y_step
next
temp6=0
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'><v:stroke endarrow='block'/></v:line>"
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'><v:stroke endarrow='block'/></v:line>"
response.write "<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:"&table_x+left_width-50&"px;top:"&table_y-30&"px;width:100px;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='center'>count</td></tr></table></v:textbox></v:shape>" 'Y轴的名称
response.write "<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:"&table_x+left_width+all_width&"px;top:"&table_y+all_height-9&"px;width:100px;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'>hour</td></tr></table></v:textbox></v:shape>" 'X轴的名称

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-temp6))
x2=table_x+left_width+all_width*i/total_no
y2=table_y+(temp3-total(i+1,j))*(all_height/(temp3-temp6))
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;width: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;width:4px;height:4px;z-index:1' fillcolor="""&line_code(j,1)&""" strokecolor="""&line_code(j,1)&"""/>"&CHR(13)
'end select
'response.write "<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:"&x1-4&"px;top:"&y1-17&"px;width:60px;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'>"&total(i,j)&"</td></tr></table></v:textbox></v:shape>" '坐标值
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-3&"px;width: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-3&"px;width:4px;height:4px;z-index:1' fillcolor="""&line_code(j,1)&""" strokecolor="""&line_code(j,1)&"""/>"&CHR(13)
'end select
'response.write "<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:"&x2-5&"px;top:"&y2-17&"px;width:60px;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'>"&total(i,j)&"</td></tr></table></v:textbox></v:shape>" '最后一点的坐标值
next
'''打印X轴
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+0&"px'/>" 'table_y+all_height+x 控制X的标点长度
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.25)/total_no&"px;top:"&table_y+all_height&"px;width:"&all_width/total_no&"px;height:18px;z-index:1'>" 'table_x+left_width+all_width*(i-x)/total_no 控制X轴的坐标值的位置
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=50
'response.write "<v:rect id='_x0000_s1025' style='position:absolute;left:"&table_x+all_width+20&"px;top:"&table_y&"px;width: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;width: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+((tb_height-20)/2)&"px;width: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
%>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ASP+VML折线图</title>
<style>
TD { FONT-SIZE: 9pt}
</style></head>
<body topmargin=5 leftmargin=0 scroll=AUTO>
<%
dim total(10,1)
total(1,0)="时间1"
total(2,0)="时间2"
total(3,0)="时间3"
total(4,0)="时间4"
total(5,0)="时间5"
total(6,0)="时间6"
total(7,0)="时间7"
total(8,0)="时间8"
total(9,0)="时间9"
total(10,0)="时间10"

total(0,1)="#FF0000,1,1,1,所有访问"'参数1线条的颜色，参数2线条的宽度，参数3线条的类型，参数4转折点的类型,参数5线条名称
total(1,1)=50
total(2,1)=20
total(3,1)=65
total(4,1)=32
total(5,1)=40
total(6,1)=22
total(7,1)=25
total(8,1)=85
total(9,1)=90
total(10,1)=50
call aspVmlLine(total,100,100,640,180,1)
%>
</body>
</html>

附件: 只有本站会员才能下载或查看附件，请您登录或注册

收藏0