一劳永逸，解决IE中显示图表的问题

使用的引挚还是以前开发的那个，只是把接口改变了，使用更方便
只需要在iframe中载入图表绘制文件chart.htm，在该URL后带入绘制参数，就可以实现各种图表的定制显示，有点类传applet的传值方式，绿色嵌入，无侵入性，方便又实用哦~~

柱形图

演示地址:http://bbs.51js.com/viewthread.php?tid=42087&pid=416668&page=1&sid=6TMKr6

折线图

扇形图

chart.htm文件

  for(i=0;i<5;i++){
   l+="<v:line from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+" strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>"
   l+="<span style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'>"+(parseInt(max)*(5-i)/5)+"</span>"
  }

  for(i in a){
   for(j in a[i]){
    if(i==0){
     if(j>0){
      l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />"
      l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a[i][j]+"</span>"
     }
    }
    else{
     if(j==0)
      l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*40)+";top:"+(ph-25)+"'>"+a[i][j]+"</span>"
     else{
      ch=a[i][j]*hsz
      if(i>1){
       oh=parseInt(a[i-1][j]*hsz)
       l+="<v:line from="+((i-1)*40)+","+(ph-oh-30)+" to="+(i*40)+","+(ph-ch-30)+" strokecolor='"+this.ac[j-1]+"' />"
      }
      l+="<v:rect title='"+a[i][j]+"' fillcolor='"+this.ac[j-1]+"' style='z-index:3;position:absolute;left:"+(i*40-1)+";top:"+(ph-ch-31)+";width:3;height:"+3+"' />"
      if(this.getCss(css,"showVal")=="t")
       l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*40-5)+";top:"+(ph-ch-42)+"'>"+a[i][j]+"</span>"
     }
    }
   }
  }
  return l

}
this.pie=function(vList,css){
  var l="",a,i,j,n,s,amt,dx=0
  var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)
  if(ph<150||pw<150){
   alert("图表区域太小，中断输出！")
   return
  }
  a=vList.split(";")
  n=a.length*170-130
  if(pw<n)
   pw=n
  l+="<v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /></v:rect>"
  l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>"
  if(a.length==2)
   dx=pw/2-100
  if(a.length==3)
   dx=pw/2-180
  for(i in a){
   a[i]=a[i].split(",")
   amt=0
   for(j=1;j<a[i].length;j++){
    amt+=parseFloat(a[i][j])
   }
   sa=0
   for(j in a[i]){
    if(i==0){
     if(j>0){
      l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />"
      l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a[i][j]+"</span>"
     }
    }
    else{
     if(j==0){
      l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*170-90+dx)+";top:"+(ph-50)+"'><nobr>"+a[i][j]+"("+amt+")</nobr></span>"
     }
     else{
      ea=a[i][j]*360/amt+sa
      if(j==a[i].length-1)
       ea=0
      if(a[i][j]>0)
       l+=this.getPie(60,sa,ea,"title:"+a[i][j]+";val:"+(parseInt((10000*a[i][j]/amt))/100)+"%;x:"+(i*170-70+dx)+";y:"+(ph/2+10)+";background:"+this.ac[j-1])
      sa=ea
     }
    }
   }
  }
  return l
}
this.getPie=function(r,sa,ea,css){
  var sf,ef,sx,sy,ex,ey
  var title=this.getCss(css,"title"),val=this.getCss(css,"val")
  var x=parseInt(this.getCss(css,"x",0)),y=parseInt(this.getCss(css,"y",0))
  sf=Math.PI*(sa/180)
  ef=Math.PI*(ea/180)
  sy=parseInt(r*Math.sin(sf))
  sx=parseInt(r*Math.cos(sf))
  ey=parseInt(r*Math.sin(ef))
  ex=parseInt(r*Math.cos(ef))

  s="m0,0l"+sx+","+sy+"ar-"+r+",-"+r+","+r+","+r+","+ex+","+ey+","+sx+","+sy+",l0,0xe"
  l="<v:shape path='"+s+"' title='"+title+"' coordsize=1,1 style='position:absolute;width:1;height:1;left:"+this.getCss(css,"x","0")+";top:"+this.getCss(css,"y","0")+"' fillcolor='"+this.getCss(css,"background","white")+"' />"
  if(ef==0)
   ef=270
  var cx=(r+10)*Math.cos((sf+ef)/2),cy=(r+10)*Math.sin((sf+ef)/2)
  l+="<span style='position:absolute;z-index:3;font:12;left:"+(cx+x-10)+";top:"+(cy+y-5)+"'>"+val+"</span>"
  return l
}
this.draw=function(vList,css){
  var l,type=this.getCss(css,"type")
  if(type=="pie")
   l=this.pie(vList,css)
  else if(type=="lines")
   l=this.lines(vList,css)
  else
   l=this.bar(vList,css)
  return l
}
}
</script>
<html xmlns:v>
<style>v\:*{behavior:url(#default#VML)}</style>
<body onselectstart=return(false) ondragstart=return(false) oncontextmenu=return(false) style=margin:0;border:0;cursor:default;font-size:12>
<script>
var ct1=new ct()
var l,v,css
l=location.href
if(l.indexOf("?")==-1){
document.write("没有绘图参数")
}
else{
l=l.slice(l.indexOf("?"))
v=l.slice(7,l.indexOf("&"))
css=l.slice(l.indexOf("&")+1).replace(/&/g,";").replace(/=/g,":")
document.write(ct1.draw(v,css))
}
</script>
</body>
</html>

posted on 2006-04-03 15:22 汪杰阅读(119) 评论(0) 编辑收藏引用所属分类: hengxing网站js

常用链接

留言簿(19)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

积分与排名

最新随笔

最新评论

阅读排行榜

评论排行榜