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

/*未经许可,不得转载!有关于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>

<script language="JavaScript" type="text/javascript">
//折线段上的各个转点
var xxx=new Array(18,6,9,6,6,13,31,25,20,16,27,29,11);
var yyy = "2007年1月|2007年2月|2007年3月|2007年4月|2007年5月|2007年6月|2007年7月|2007年8月

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

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

zcwmxn

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值