Tạo biểu đồ Gauge với HTML5 Canvas và Javascript

Trong bài viết ngày hôm nay, mình sẽ chỉ cho các bạn cách tạo biểu đồ Gauge bằng cách sử dụng HTML5 Canvas kết hợp với Javascript. Biểu đồ Gauge sẽ tự động refresh lại sau mỗi 2 giây và số lượng tăng / giảm sẽ được minh họa trong biểu đồ.

HTML

Để tạo biểu đồ, chúng ta chỉ cần khai báo một phần tử canvas như sau :

<canvas id="canvas" width="300" height="300">

CSS

Sau đó chúng ta chỉ việc định dạng biểu đồ đơn giản như sau :

/*Centering the gauge*/

#canvas {

    display: block;

    width: 300px;

    margin: 100px auto;

}

JavaScript

Đây chính là phần quan trọng và là nơi mà các bạn nên dành sự quan tâm nhất. Đọc kỹ mọi chú thích ở mỗi dòng để hiểu rõ hơn về cách tạo và chạy biểu đồ :

<script language="JavaScript">

window.onload = function(){

    //canvas initialization

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    //dimensions

    var W = canvas.width;

    var H = canvas.height;

    //Variables

    var degrees = 0;

    var new_degrees = 0;

    var difference = 0;

    var color = "lightgreen"; //green looks better to me

    var bgcolor = "#222";

    var text;

    var animation_loop, redraw_loop;

     

    function init()

    {

        //Clear the canvas everytime a chart is drawn

        ctx.clearRect(0, 0, W, H);

         

        //Background 360 degree arc

        ctx.beginPath();

        ctx.strokeStyle = bgcolor;

        ctx.lineWidth = 30;

        ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false); //you can see the arc now

        ctx.stroke();

         

        //gauge will be a simple arc

        //Angle in radians = angle in degrees * PI / 180

        var radians = degrees * Math.PI / 180;

        ctx.beginPath();

        ctx.strokeStyle = color;

        ctx.lineWidth = 30;

        //The arc starts from the rightmost end. If we deduct 90 degrees from the angles

        //the arc will start from the topmost end

        ctx.arc(W/2, H/2, 100, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false);

        //you can see the arc now

        ctx.stroke();

         

        //Lets add the text

        ctx.fillStyle = color;

        ctx.font = "50px bebas";

        text = Math.floor(degrees/360*100) + "%";

        //Lets center the text

        //deducting half of text width from position x

        text_width = ctx.measureText(text).width;

        //adding manual value to position y since the height of the text cannot

        //be measured easily. There are hacks but we will keep it manual for now.

        ctx.fillText(text, W/2 - text_width/2, H/2 + 15);

    }

     

    function draw()

    {

        //Cancel any movement animation if a new chart is requested

        if(typeof animation_loop != undefined) clearInterval(animation_loop);

         

        //random degree from 0 to 360

        new_degrees = Math.round(Math.random()*360);

        difference = new_degrees - degrees;

        //This will animate the gauge to new positions

        //The animation will take 1 second

        //time for each frame is 1sec / difference in degrees

        animation_loop = setInterval(animate_to, 1000/difference);

    }

     

    //function to make the chart move to new degrees

    function animate_to()

    {

        //clear animation loop if degrees reaches to new_degrees

        if(degrees == new_degrees)

            clearInterval(animation_loop);

         

        if(degrees < new_degrees)

            degrees++;

        else

            degrees--;

             

        init();

    }

     

    //Lets add some animation for fun

    draw();

    redraw_loop = setInterval(draw, 2000); //Draw a new chart every 2 seconds  

}

</script>

Thế là xong, tùy theo mục đích và ứng dụng mà các bạn xây dựng, có thể chỉnh sửa lại ở phần javascript bên trên. Mình hy vọng là qua bài viết này, các bạn sẽ hiểu rõ hơn về cách dùng javascript trong việc tạo biểu đồ.