html5---svg(图表圆饼篇)

(function(){    
    function svg(option){
        this.config = this.extend(this.config,option);
        this.create();
        this.handhold();
        this.errtest();
    }

    svg.prototype = {
        constructor:svg,
        /*The basic configuration*/
        config:{
            datatype:"pie",    //The default for the pie chart
            data:[],    //The default data is empty
            color:[],    //The default color is empty
            parentnode:document.createDocumentFragment(),//ocument fragment was inserted into the
            startdeg:0,  //By default, the starting point for the X axis (0 starts)
            r:100,     //The default radius is 100
            centerx:150,    //The default center axis is 150 x
            centery:150,     //The default y center shaft 150 y
            tempdeg : 0,     //deg temp preserve
            target:"",       //The target node
        },
        /*Object extension*/
        extend:function(config,option){
            for(var i in option){
                config[i] = option[i]
            }
            return config;
        },
        create:function(){
          var data = this.config.data, that = this, testnumber=0,check = true;
          var r = this.config.r;
          this.config.centerx = this.config.centery = r;
          /*Parameter detection*/
          for(var i =0 ; i<data.length;i++){
              for(var obj in data[i]){
                  if(typeof data[i][obj]=="number"){
                      testnumber+=data[i][obj]
                  }
                  else{
                      check=false;
                      return;
                  }
              }
          }
          if(!check||testnumber>100){
              return;
          }

          for(var i =0 ; i<data.length;i++){
              that.calculate.call(that,data[i],i)
          }
          document.getElementById(this.config.target).appendChild(this.config.parentnode)
        },
        calculate:function(obj,i){
            var path = document.createElementNS("http://www.w3.org/2000/svg", "path"),deg;
            /*get base paramate and loacl preserve*/
            var startdeg = this.config.startdeg, 
                r = this.config.r, 
                centerx = this.config.centerx, 
                centery = this.config.centery;
            /*get data*/
            for(var nub in obj){
                deg = Number(obj[nub])
            }
            this.config.tempdeg += deg;
            var degend = this.config.tempdeg
            /*The design of path*/
            var startx = r*Math.cos(Math.PI*2*startdeg/100)+centerx;
            var starty = r*Math.sin(Math.PI*2*startdeg/100)+centery;
            var endx = r*Math.cos(Math.PI*2*degend/100)+centerx;
            var endy = r*Math.sin(Math.PI*2*degend/100)+centery;
            path.setAttribute("d","M"+centerx+" "+centery+" L"+startx+" "+starty+" A"+r+" "+r+", 0 0 1 "+endx+" "+endy+" Z ");
            if(!this.config.color[i]){
                this.config.color[i]="#"+parseInt(Math.random()*1000000)
            }
            path.setAttribute(‘fill‘,this.config.color[i]);
            path.style.opacity=0.7;
            this.config.parentnode.appendChild(path);
            this.config.startdeg+=deg;
        },
        handhold:function(){
            var target = document.getElementById(this.config.target)
            target.onmouseover=function(event){
                event = event?event:window.event;
                var target = event.target;
                if(target.nodeName==‘path‘){
                    target.style.opacity=1
                }
            }
            target.onmouseout=function(event){
                event = event?event:window.event;
                var target = event.target;
                if(target.nodeName==‘path‘){
                    target.style.opacity=0.7
                }
            }
        },

        /*test erro function*/
        errtest:function(){
            console.log(this.config)
        },
    }

    function _svg(option){
         new svg(option)
    }
    this._svg = _svg
}).call(this)

_svg({
    data:[{"title":15},{"title":35},{"title":5},{"title":12},{"title":1}],
    target:"pie1",
    color:["#FF6666","#99CC00","#FFFF99","#CCCCCC","#FF9933"],
    r:60   //圆饼半径
    })

<svg width=300 height=300 id="pie1">
                
</svg>