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拷代码吧。不想写的童鞋也可以直接拷(我经常这么干，哈哈哈)；
一会再把怎么做折线图也发了。
以上全部手写个人原创不加防腐剂。哈哈哈，如果您看到这里了，跪求留个言。哪怕批评一下也好。嘿嘿。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
