现在的位置: 首页 > 综合 > 正文

JS生成饼图

2013年11月30日 ⁄ 综合 ⁄ 共 3564字 ⁄ 字号 评论关闭

<?xml version="1.0" encoding="gb2312" standalone="yes"?>
<html xmlns:v="
http://www.eglic.com/">
 <head>
  <title></title>
  <meta name="Generator" content="EditPlus" />
  <meta name="Author" content="eglic" />
  <link rel="stylesheet" type="text/css" href="" _fcksavedurl="""" />
  <script language="javascript" src=""></script>
  <style type="text/css">
   v/:* {behavior:url(#default#VML);}
  </style>
  <script language="JScript">
   function GItem(){
    this.Percent='00.00 %';
    if(arguments.length!=3) throw new Error('构造函数错误,请提供三个参数');
    else{
     this.ItemName=arguments[0];
     this.Name=arguments[1];
     this.Value=parseFloat(arguments[2]);
    }
   }
   function genRandomColor(){
    var s='#';
    for(var i=0;i<3;i++){
     var i1=parseInt(Math.random()*15);
     var i2=parseInt(Math.random()*16);
     s+=i1.toString(16);
     s+=i2.toString(16);
    }
    return s;
   }
   function CreatePie(size,arrData){
    //colorTable的长度决定最多能显示多少个项目
    //var colorTable=new Array('#999933','#0000E0','#FF9900','#336600','#FF0000','#003300','#CC66FF','#66FFFF','#330099');
    var group=document.createElement('<v:group id="group1" CoordSize="1000,1000" style="width:'+size+';height:'+size+'" title="比例图表">');
    var total=0;
    for(var i=0;i<arrData.length;i++){
     total+=arrData[i].Value;
    }
    var startAngle=0;
    for(var i=0;i<arrData.length;i++){
     arrData[i].Percent=arrData[i].Value/total;
     var AbsAngle=arrData[i].Percent*2*Math.PI;
     var StartAngle=startAngle;
     var EndAngle=startAngle+AbsAngle;
     startAngle=EndAngle;
     var StartX=parseInt(Math.cos(StartAngle)*500)+500;
     var StartY=parseInt(Math.sin(StartAngle)*500)+500;
     var EndX=parseInt(Math.cos(EndAngle)*500)+500;
     var EndY=parseInt(Math.sin(EndAngle)*500)+500;
     var colorSel=genRandomColor();
     var tSmp=document.createElement('<v:rect style="position:absolute;width:50px;height:50px;left:50px;top:'+(1030+i*90).toString()+'px;" fillColor="'+colorSel+'">');
     //tTxt.innerText=arrData[i].Name;
     arrData[i].Percent=(parseFloat(arrData[i].Percent.toString().replace(/(/d/./d{4}).*/gi,'$1'))*100).toString().replace(/(/d+/./d{2}).*/gi,'$1');
     var sEle='<v:shape style="position:absolute;left:0px;top:0px;width:1000px;height:1000px;cursor:hand;" '+
        'strokeHeight="0px" strokeColor="'+colorSel+'" fillcolor="'+colorSel+'" TITLE="'+arrData[i].ItemName+' -> '+arrData[i].Name+'/n数值:'+arrData[i].Value+'/n比率:'+arrData[i].Percent+' %" '+
        'path="m 500,500 l '+EndX+','+EndY+' at 0,0,1000,1000,'+EndX+','+EndY+','+StartX+','+StartY+' l '+StartX+','+StartY+' x e"'+
        '>';
     group.appendChild(tSmp);
     group.insertAdjacentHTML('BeforeEnd',
      '<v:line from="120,'+(1055+i*90).toString()+'" to="400,'+(1056+i*90).toString()+'" strokeWeight="1" strokeColor="'+colorSel+'"><v:path textpathok="t"/>'+
      '<v:textpath string="'+arrData[i].Name+'" on="t" fitpath="t" fitshape="t" xscale="t" /></v:line>');
     var oEle=document.createElement(sEle);
     group.appendChild(oEle);
    }
    return group;
   }
   function Test(){
    var o=CreatePie(200,new Array(
        new GItem('测试类别','测试类别A',5),
        new GItem('测试类别','测试类别B',6),
        new GItem('测试类别','测试类别C',7),
        new GItem('测试类别','测试类别D',8),
        new GItem('测试类别','测试类别E',9),
        new GItem('测试类别','测试类别F',10),
        new GItem('测试类别','测试类别G',11),
        new GItem('测试类别','测试类别H',15),
        new GItem('测试类别','测试类别I',13)
       )
      );
    document.body.appendChild(o);

    //var winA=window.open("about:blank",'winA','');
    //winA.document.write('<textarea style="width:100%;height:100%;">'+document.body.innerHTML+'</textarea>');
   }
   </script>
 </head>
 <body onload="javaScript:Test();">
 </body>
</html>

抱歉!评论已关闭.