HTML5 provides a powerful drawing API that allows us to easily draw various graphics using JavaScript. This article will mainly explain how to use HTML5 to draw pie chart (statistical chart). Let’s take a look at the pie chart effect
This graph is dynamically generated, and the pie chart is drawn dynamically according to the scale parameter (array) passed in. The size of the pie chart is also dynamically adjusted according to the < canvas > height.
All codes are as follows:
<!DOCTYPE html>
<html>
<head>
< title > canvas test
<meta charset="UTF-8">
<script>
//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 of circle
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; // starting radian
Var endangle = 0; // end radian
for (var i = 0; i < data_arr.length; i++)
{
//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 the center of the circle
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 elegant black'; // italicized 30 pixel Microsoft YaHei font
ctx.fillStyle = color_arr[i]; //"#000000";
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);
}
//The init() function is executed when the page is loaded
window.onload = init;
</script>
</head>
<body>
<h3>Demonstration of HTML5 drawing pie chart</h3>
<p>
<canvas id="canvas_circle" width="500" height="300" style="border:2px solid #0026ff;" >
Browser does not support canvas
</canvas>
</p>
</body>
</html>This function can be used directly. If you want to make it more beautiful, you can add some extra beautiful drawing.
The biggest flexibility of the code is to separate the drawing parameters from the drawing code, and the size of the pie chart is automatically adjusted according to the height of the canvas container. The method of passing parameters is 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);This article on the HTML5 pie chart drawing method to achieve this, more relevant HTML5 pie chart statistical chart content, please search the previous articles of developpaer or continue to browse the related articles below, I hope you will support developeppaer more in the future!