Talking about HTML5 and CSS3 appeased map!

God horse pie chart?

Pie chart, everyone should be familiar with, in the statistical data comparison, almost everywhere use. A statistical pie chart like CNZZ

From the pie chart, the distribution of the visitor's area is vividly displayed, and a large circle is formed in a fan-shaped way.

What methods are used to implement

At present, many sites make pie chart mostly use Flash, or background language generation, such as php,python as long as the corresponding basic library can be implemented to achieve drawing. But few sites do so, because server resources are consumed.

Flash is used in CNZZ.

Generated by PHP

HTML5 and CSS3 can also draw a pie chart.

It has to be said that the launch of HTML5 and CSS3 will overthrow the older generation of web-makers. Especially in today's browser standards are constantly unified, the new page maker almost unexpectedly in the past time to make Web compatibility is a very painful thing.

In the past, we had to achieve fillets only, and now we only need one piece of code in CSS3. and CSS3 function far more than these, with HTML5 can also appeased figure data analysis.

However, HTML5 and CSS3 do not have the idea of programming language in strict sense, so we should use JS to "draw" it.

HTML code

1	<canvasid="bingtu" width="224" height="130"></canvas>

JS Code

12345678910111213141516171819

var color = ["#999999","#333333","#336799"];var data = [25,35,50];function drawCircle(){        var canvas = document.getElementById("bingtu");        var ctx = canvas.getContext("2d");        var startPoint= 1.5 * Math.PI;        for(var i=0;i<data.length;i++){                ctx.fillStyle = color[i];                ctx.strokeStyle = color[i];                ctx.beginPath();                ctx.moveTo(112,65);                ctx.arc(112,65,65,startPoint,startPoint-Math.PI*2*(data[i]/100),true);                ctx.fill();                ctx.stroke();                startPoint -= Math.PI*2*(data[i]/100);        }}drawCircle();

Canvas is HTML5 new Canvas label, personally feel that this label will be a great use in the future, like to study HTML5 's children's shoes can delve into this label. The height of the canvas can be set freely, of course, the width cannot be less than high, otherwise the graphics are not round.

Here is the key to the use of this JS code

var color = ["#999999", "#333333", "#336799"]; Colors used in the appeased chart

var data = [25,35,50]; Data ratio, all the data is added up is 100, in order to draw full circle

var ctx = Canvas.getcontext ("2d"); Draw 2D Floor Plan

var startpoint= 1.5 * MATH.PI; Draw the direction starting point, there is the inverse of the points, usually 1.5*math.pi or 0

Ctx.fillstyle = color[i] Fill Color

Ctx.beginpath (); Start drawing

Ctx.moveto (112,65); Each time you return to the center, the first value 112 is half the width of the canvas, and 65 is half the height of the canvas. In fact, you can also use JS to get the width of the object is good, save the canvas width and then to adjust the JS code parameters.

Ctx.arc (...); Start drawing, the first two parameters are the center coordinate, the third parameter is the RADIUS size, the fourth parameter is the starting position of the circumference, the fifth parameter is the arc length, is the range of our arc, math.pi*2 is the whole circle, The Math.PI is a semicircle, and the sixth parameter is a Boolean value that determines whether it is clockwise or counterclockwise, where false is clockwise.

Ctx.fill (); Fill

Ctx.stroke (); Border

StartPoint-= math.pi*2* (data[i]/100); After drawing a good deed, recalculate back to the original point and start drawing the next one, otherwise the pie chart will not be rounded up.

Effect:

At present, the only regret is not to add text on the chart.

Other HTML5 and CSS3 graphical statistics examples

Reprint Link: http://www.qttc.net/201212255.html

(turn) talk about HTML5 and CSS3 appeased map!