分享
 
 
 

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

王朝asp·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

转自:http://goaler.xicp.net/ShowLog.asp?ID=429

演示:http://goaler.xicp.net/Demo/asp_vml_pic1.asp

方法一

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

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;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-2&"px;width: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;width:"&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;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+4&"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

%>

方法二:

<%

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

'#####################################

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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有