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

哈哈哈，好久没写博客了，最近比较忙，气死了我。今天又是周末，把前两天放前面的有些东西还没写完，下午把他写了。嘿嘿，废话少说，我们来研究研究svg.本来我以前学的是canvas.当时学canvas.感觉那家伙各种牛逼。但是我还是发现那东西比较复杂。写着繁琐。全部都需要用js控制。于是最近去看一了下svg.其实原动力不在于此。对我等渣渣而言学撒都一样。性能，适用性撒的。撒都不用管。好了，我们先来看这个效果。各位看官请移步。http://data.auto.sina.com.cn/car_comment/395。这里有个这个效果;

(别说我给新浪汽车打广告啊。嘿嘿。但是别人确实做得好，我很喜欢新浪)好了，这个是带交互的一个图(暂且叫图).我们考虑一下。图片肯定没有这个效果。canvas估计也不会有。除非有几个画布拼接。这样的话，我还不如不要是吧。

我们今天就做这个东西。

基础的知识点。应该没有什么吧。里面有个标签叫path不会的东西自己查一下。上代码。哈哈哈

(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   //圆饼半径
    })

html代码：

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

</svg>

别问我注释那些英文是撒，或者读不通，请移步谷歌翻译。我是中文翻译到英文的，你再翻译回来应该就对了.(英语不好的人，大家就将就点吧)。好了。代码上了，结果是个撒。

请大家狠戳这里http://fengchuantao.github.io/svg/web/pie.html;如果你出现的和我不一样。那直接去github拷代码吧。不想写的童鞋也可以直接拷(我经常这么干，哈哈哈)；

一会再把怎么做折线图也发了。

以上全部手写个人原创不加防腐剂。哈哈哈，如果您看到这里了，跪求留个言。哪怕批评一下也好。嘿嘿。