HTML5纯div饼图

浏览器饼图生成基本上都用canvas svg  既然div可以画圆 那就能做饼图 两年前做的纯技术讨论 勿拍砖

/*JS CSS3 HTML5饼图生成类->建议使用firefox高版本浏览器;

1.完全兼容firefox浏览器，部分功能支持safari、opera、chorme;完全不支持IE9以下浏览器 o(︶︿︶)o ;
2.使用方法
var xx=new PieChart(DOM对象(在什么地方绘制),绘制饼图半径单位px,json格式对象)
例:json格式对象格式 '[{"name":"测试1","value":"100","color":"red"},{"name":"测试2","value":"200","color":"green"},{"name":"测试3","value":"200","color":"blue"},{"name":"测试4","value":"900","color":"black"},{"name":"测试5","value":"200","color":"yellow"}]';
事件绑定(部分浏览器存在兼容性问题);
xx.ePie 由饼图块的dom对象组成数组;顺序12点钟开始顺时针旋转 12点开始的为第一个dom对象。
xx.ePie[0].onclick=function(){你可以执行的方法}
*/
function PieChart(tobj,wh,data)
{
this.tobj=tobj;
this.Pwh=parseFloat(wh);
this.data=data;
this.all=0;
this.ePie=new Array();
this.init();
this.drawpic();
}

PieChart.prototype.init=function(){
for (var i=0 ;i<this.data.length ;i++)
{
this.all+=parseFloat(this.data[i].value);
}
}

PieChart.prototype.drawpic=function(){
    var nowdeg=0;
    for (var i=0;i<this.data.length;i++){
     var ls=this.creartblock((parseFloat(this.data[i].value)/this.all)*360,this.data[i].color,this.data[i].name,(parseFloat(this.data[i].value)/this.all),i);
         nowdeg+=(parseFloat(this.data[i].value)/this.all)*360;
         ls.style.transform="rotate("+nowdeg+"deg)";
         ls.style.webkitTransform="rotate("+nowdeg+"deg)";
         ls.style.msTransform="rotate("+nowdeg+"deg)";
         this.tobj.appendChild(ls);
         this.ePie.push(ls);
    }
}

PieChart.prototype.creartblock=function(p,color,name,per,ni)
{
        var mobj=document.createElement("div");
            mobj.style.height=this.Pwh+"px";
            mobj.style.width=this.Pwh+"px";
            mobj.style.position="absolute";
             mobj.style.pointerEvents="none";
            mobj.setAttribute("piename",name);
            mobj.setAttribute("piecolor",color);
            mobj.setAttribute("num",ni);
            mobj.setAttribute("pieper",(""+(per*100)).substr(0,4)+"%");
            if(p>180){
            var lspie=this.creatPieDIV(0,0,color);
            mobj.appendChild(lspie);
            lspie=this.creatPieDIV(180,360-p,color);
            mobj.appendChild(lspie);
            }else{
            lspie=this.creatPieDIV(0,180-p,color);
            mobj.appendChild(lspie);
           
    }
        
    return mobj;
}

PieChart.prototype.creatPieDIV=function(deg1,deg2,color){
        var pobj=document.createElement("div");
            pobj.style.clip="rect(0px, "+this.Pwh/2+"px, "+this.Pwh+"px, 0px)";
            pobj.style.height=this.Pwh+"px";
            pobj.style.width=this.Pwh+"px";
            pobj.style.position="absolute";
            pobj.style.transform="rotate("+deg1+"deg)";
            pobj.style.webkitTransform = "rotate("+deg1+"deg)";
            pobj.style.msTransform = "rotate("+deg1+"deg)";
            pobj.style.pointerEvents="none";

        var cobj=document.createElement("div");
            cobj.style.borderRadius=this.Pwh/2+"px";
            cobj.style.clip="rect(0px, "+this.Pwh/2+"px, "+this.Pwh+"px, 0px)";
            cobj.style.height=this.Pwh+"px";
            cobj.style.width=this.Pwh+"px";
            cobj.style.position="absolute";
            cobj.style.backgroundColor=color;
            cobj.style.transform="rotate("+deg2+"deg)";
            cobj.style.webkitTransform = "rotate("+deg2+"deg)";
            cobj.style.msTransform = "rotate("+deg2+"deg)";
            cobj.style.pointerEvents="auto";
            pobj.appendChild(cobj);

return pobj;
}