HTML5---svg (Chart round pie)

hahaha, long time no blog, recently more busy, angry dead me. Today is the weekend, put the first two days in front of some things have not finished, the afternoon wrote him. Hey, talk less, let's study svg. Originally I used to learn canvas. I was learning canvas at the time. I feel that guy's kind of cool. But I still find that thing more complicated. It's a tedious writing. All need to use JS control. So recently went to see the next SVG. In fact, the motive force is not in this. It's the same for me and the dregs. Performance, applicability of scatter. Satan does not care. Well, let's look at the effect first. Ladies and gentlemen, please crossing. http://data.auto.sina.com.cn/car_comment/395. Here's one effect;

(Don't say I advertise to Sina.) Hey. But others really do well, I like Sina very much. Well, this is a diagram with an interaction (for the moment). Let's think about it. The picture certainly does not have this effect. There is no canvas estimate. Unless there are several canvas stitching. In that case, I might as well not.

We're going to do this thing today.

The basis of the knowledge point. There should be nothing. There's a tag that's called path. Check it out for yourself. On the code. Ha ha haha

(function(){        functionsvg (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 chartData:[],//The default data is emptyColor:[],//The default color is emptyParentnode:document.createDocumentFragment (),//ocument fragment was inserted into thestartdeg:0,//by default, the starting point for the X axis (0 starts)R:100,//The default radius iscenterx:150,//The Default center axis is xcentery:150,//The default y center shaft ytempdeg:0,//deg Temp PreserveTarget: "",//The target node        },        /*Object Extension*/Extend:function(config,option) { for(varIinchoption) {Config[i]=Option[i]}returnconfig; }, create:function(){          vardata = This. config.data, that = This, Testnumber=0,check =true; varR = This. CONFIG.R;  This. Config.centerx = This. Config.centery =R; /*Parameter Detection*/           for(vari = 0; i<data.length;i++){               for(varObjinchData[i]) {                  if(typeofdata[i][obj]== "Number") {Testnumber+=Data[i][obj]}Else{Check=false; return; }              }          }          if(!check| | testnumber>100){              return; }           for(vari = 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) {varPath = Document.createelementns ("http://www.w3.org/2000/svg", "path"), deg; /*get base Paramate and Loacl Preserve*/            varStartdeg = This. Config.startdeg, R= This. CONFIG.R, CenterX= This. Config.centerx, CenterY= This. Config.centery; /*Get Data*/             for(varNubinchobj) {deg=Number (Obj[nub])} This. config.tempdeg + =deg; varDegend = This. Config.tempdeg/*The design of the path*/            varStartX = R*math.cos (math.pi*2*startdeg/100) +centerx;varStarty = R*math.sin (math.pi*2*startdeg/100) +centery;varEndX = R*math.cos (math.pi*2*degend/100) +centerx;varEndy = 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(){            vartarget = document.getElementById ( This. Config.target) Target.onmouseover=function(Event) {event= event?event:window.event; vartarget =Event.target; if(target.nodename== ' path ') {target.style.opacity=1}} target.onmouseout=function(Event) {event= event?event:window.event; vartarget =Event.target; if(target.nodename== ' path ') {target.style.opacity=0.7                }            }        },        /*Test Erro function*/ErrTest:function() {Console.log ( This. config)},}function_svg (option) {Newsvg (option)} This. _svg =_svg}). Call ( This)

Call Method:

_svg ({    data:[{"title": 15},{"title": 35},{"title": 5},{"title": 12},{"title": 1}],    target: "Pie1",    color:["#FF6666", "#99CC00", "#FFFF99", "#CCCCCC", "#FF9933"],    r:   // Round cake radius    })

HTML code:

<widthheightid= "Pie1" >                </ svg >

Do not ask me to comment that the English is Satan, or unreadable, please visit Google Translate. I am a Chinese translator in English, you should be right to translate it back. (People who are not good at English, we will point it). All right. Code, and the result is a Caesar.

Please stab here http://fengchuantao.github.io/svg/web/pie.html, if you appear and I am not the same. Go straight to the GitHub code. Do not want to write children's shoes can also be directly copied (I often do so, haha ha);

I'll do it again. The line chart was also sent.

All the above handwritten individuals are original without preservatives. hahaha, if you see here, kneel and beg to leave a word. Even criticism. Hey.

HTML5---svg (Chart round pie)