不用任何控件的VML统计图(3)-折线图

最新推荐文章于 2024-06-06 11:07:16 发布

置顶 zcwmxn

最新推荐文章于 2024-06-06 11:07:16 发布

阅读量720

点赞数

分类专栏： javascript asp 文章标签： textbox javascript 网格 behavior function email

本文链接：https://blog.youkuaiyun.com/zcwmxn/article/details/2043304

版权

javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

asp

2 篇文章

订阅专栏

/*未经许可，不得转载！有关于VML方面的问题欢迎交流。

Email:zcwmxn@sina.com

作者：周长武

<html xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<STYLE>
v/:* { BEHAVIOR: url(#default#VML) }
</STYLE>

<script language="JavaScript" type="text/javascript">
function Chart_Draw(title,width,height,xy,fn){
var s,i,fn;
var p="";
var x=Array(9)
var y=Array(9)

fn = fn.split("|");

MaxValue = 0;
for(m = 0; m < fn.length; m++)
   if(MaxValue <= parseInt(xy[m]))
    MaxValue = parseInt(xy[m])

for(i=0;i<fn.length;i++){
   x[i]=i*100;
   y[i]= 400 - 4 * parseFloat(xy[i]/MaxValue)*100;
   p+=x[i]+","+y[i]+" ";
}
s="<v:group style='width:"+width+"px; height:"+height+"px' coordsize='1000,500'>";
//背景
s+="<v:rect style='width:" + (fn.length) * 100 + "px;height:500px' fillcolor='white'

strokecolor='black'>";
s+="<v:shadow on='t' type='single' color='silver' offset='5px,5px' />";
s+="</v:rect>";
//标题
s+="<v:Rect style='top:5;width:" + (fn.length) * 100 + "px;height:50px' stroked='f'>";
s+="<v:TextBox style='font-size:14px; font-weight:bold; text-

align:center'>"+title+"</v:TextBox>";
s+="</v:Rect>";
//曲线图坐标网格
s+="<v:group style='position:absolute;top:50px;left:60px;width:900px;height:400px'

coordsize='900,400' coordorig='0,400'>";
s+="<v:rect style='width:fn.length*100px;height:400px' strokecolor='#ccc' />";
//横向网格
for(i=1;i<=40;i++){
   s+="<v:line from='0,"+i*10+"' to='" + (fn.length-1) * 100+ ","+i*10+"'>";
   if(i==20)
    s+="<v:stroke color='#F90' />";
   else if(i%10==0)
    s+="<v:stroke color='#ccc' />";
   else
    s+="<v:stroke color='#ccc' dashstyle='shortdash' />";
   s+="</v:line>";
}
//纵向网格
for(i=1;i<=(fn.length-1);i++){
   s+="<v:line from='"+ i*100+",0' to='"+i*100+",400' strokecolor='#ccc' />";
}
//曲线
s+="<v:polyline style='position:absolute' strokecolor='green' filled='f'

strokeweight='1px' points='"+p+"' />";
//各个折点
for(i=0;i<fn.length;i++){
s+="<v:rect style='position:absolute;left:"+(x[i]-4)+";top:"+(y[i]-4)+";width:8;height:8'

title='"+fn[i]+"："+xy[i]+"' fillcolor='red' stroked='f' />";
s+="<v:shape style='position:absolute;left:"+(x[i]+10)+";top:"+(y[i]-8)

+";width:35;height:30;font-size:10px;font-weight:bold;color:#666'>"+xy[i]+"</v:shape>";
}
s+="</v:group>";
//底部项目
for(i=0;i<fn.length;i++){
s+="<v:shape style='position:absolute;left:"+(20+i*100)

+";top:460;width:80;height:30;text-align:center;font-size:12px'>"+fn[i]+"</v:shape>";
}
//左边项目
for(i=1;i<6;i++){
s += "<v:shape style='position:absolute;left:30;top:"+(i*100-57)

+";width:30;height:100;text-align:center;font-size:12px'>"
   if(i==1)
    s += MaxValue
   s += "</v:shape>";
}
s+="</v:group>";
document.write(s);
}
</script>
</head>

<body>

|2007年9月|2007年10月|2007年11月|2007年12月|2008年1月"
//输入图形，其中宽和高可以更改
Chart_Draw("数量变化趋势",880,450,xxx,yyy);
</script>
</body>
</html>