Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to draw a statistical chart of data in Html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The full code is as follows:

Canvas test / / draw pie chart function drawCircle (canvasId, data_arr, color_arr, text_arr) {var c = document.getElementById (canvasId); var ctx = c.getContext ("2d"); var radius = c.height / 2-20 / / Radius var ox = radius + 20, oy = radius + 20; / / Center var width = 30, height = 10; / / Legend width and height var posX = ox * 2 + 20, posY = 30; / var textX = posX + width + 5, textY = posY + 10; var startAngle = 0 / / start Radian var endAngle = 0; / / end Radian for (var I = 0; I < data_arr.length; iTunes +) {/ / draw pie chart endAngle = endAngle + data_ arr [I] * Math.PI * 2 / / end Radian ctx.fillStyle = color_ arr [I]; ctx.beginPath (); ctx.moveTo (ox, oy); / / move to ctx.arc (ox, oy, radius, startAngle, endAngle, false); ctx.closePath (); ctx.fill () StartAngle = endAngle; / / set starting Radian / / draw scale and text ctx.fillStyle = color_ arr [I]; ctx.fillRect (posX, posY + 20 * I, width, height); ctx.moveTo (posX, posY + 20 * I) Ctx.font = 'bold 12px Microsoft Arr'; / / italic 30-pixel Microsoft Arr font ctx.fillStyle = color_ arr [I]; var percent = text_ arr [I] + ":" + 100 * data_ arr [I] + "%"; ctx.fillText (percent, textX, textY + 20 * I) }} function init () {/ / draw pie chart / / scale data and color var data_arr = [0.05,0.25,0.6,0.1]; var color_arr = ["# 00FF21", "# FFAA00", "# 00AABB", "# FF4400"] Var text_arr = ["first quarter", "second quarter", "third quarter", "fourth quarter"]; drawCircle ("canvas_circle", data_arr, color_arr, text_arr);} / / execute the init () function _ window.onload = init when the page loads Demonstration of drawing pie chart by HTML5

Browsers do not support canvas

This function can be used directly, if you want to do more beautiful, you can add some extra beautiful drawing.

The greatest flexibility of this code is to separate the drawing parameters from the drawing code, and the pie size is automatically adjusted according to the height of the Canvas container. The parameters are passed as follows:

Var data_arr = [0.05,0.25,0.6,0.1]; / / proportional data var color_arr = ["# 00FF21", "# FFAA00", "# 00AABB", "# FF4400"]; / / Color var text_arr = ["first quarter", "second quarter", "third quarter", "fourth quarter"] / / text / / draw pie chart drawCircle ("canvas_circle", data_arr, color_arr, text_arr); "how to draw data statistical chart in Html5" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.