The method of drawing HTML5 pie chart to realize statistical chart

Time:2020-12-2

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!