Use canvas to write a doughnut chart.

The principle uses canvas to draw:

First step: Draw a great circle

Part II: Draw a fan

Part III: Draw a small circle

Overlay each other.

Final effect:

Now on the code:

(function($) {$.fn.drawpic=function(opts) {vardefaults={canvasbj:"White",//Canvas BackgroundCanvaswidth:50, Canvasheight:50, BIGBG:"Red",//Large Circle BackgroundBIGRADIUS:50,//Circle RadiusRingcolor: "Yellow",//Ring ColorSMALLBG: "White",//small round backgroundSmallradius:30,//Small Circle Radiusdeg:0.25,//percent, 90 degreesText: "90/360", TextColor:"Black", Textfont:"Normal 14px Microsoft ya Black"        }; functionDraw (id,opt) {varcanvas=document.getElementById (ID); if(canvas==NULL){                return false; }            varCtx=canvas.getcontext (' 2d '); //Fill Canvasctx.fillstyle=OPT.CANVASBJ; Ctx.fillrect (0,0, Opts.canvaswidth,opts.canvasheight);            Ctx.beginpath (); //Reset Canvas StartCtx.translate (OPTS.CANVASWIDTH/2, OPTS.CANVASHEIGHT/2); //go to a new startCtx.moveto (0,0); //draw a great circleCtx.arc (0,0,opts.bigradius,0,math.pi*2,true);            Ctx.closepath (); Ctx.fillstyle=OPTS.BIGBG;            Ctx.fill (); //Start Drawing SectorCtx.beginpath (); Ctx.moveto (0, 0); //drawing ArcsCtx.arc (0, 0, Opts.bigradius, 0, -1*opts.deg*360*math.pi/180,true);//Closed PathCtx.closepath (); Ctx.fillstyle=Opts.ringcolor;                        Ctx.fill (); //draw a small circleCtx.beginpath (); Ctx.moveto (0,0); Ctx.arc (0,0,opts.smallradius,0,math.pi*2,true);            Ctx.closepath (); Ctx.fillstyle=OPTS.SMALLBG;                        Ctx.fill (); //Draw TextCtx.moveto (0,0);//move stroke to OriginCtx.fillstyle=opts.textcolor;//text colorCtx.font=opts.textfont;//textctx.textalign= "center";//Center horizontally relative to OriginCtx.textbaseline= "Middle";//Center vertically relative to OriginCtx.filltext (opts.text,0,0);//Start Writing} opts=$.extend ({},defaults,opts);  This. each (function(){            varobj=$ ( This); varcurrentcanvas= "Canvas" + (NewDate ()). GetTime (); Obj.html ("<canvas id=" "+currentcanvas+" ' width= ' "+opts.canvaswidth+" ' height= ' "+opts.canvasheight+" > Your device does not support!</ Canvas> ");        Draw (currentcanvas,opts);    }); }}) (JQuery);

HTML code and calls:

<div class= "Pie1" ></div> <script type= "Text/javascript" >        $(". Pie1"). Drawpic ({canvasbj:"#ccc",//Canvas Backgroundcanvaswidth:400, Canvasheight:300, BIGBG:"Red",//Large Circle BackgroundBIGRADIUS:80,//Circle RadiusRingcolor: "Yellow",//Ring ColorSMALLBG: "White",//small round backgroundSMALLRADIUS:65,//Small Circle Radiusdeg:0.25,//percentageText: "90/360", TextColor:"Black", Textfont:"Normal 30px Microsoft ya Black"        }); </script>

Use canvas to write a doughnut chart.