Tạo biểu đồ Gauge bằng 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 đồ.

Xem Demo | Download

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" awidth="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;
	awidth: 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.awidth;
	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 awidth from position x
		text_awidth = ctx.measureText(text).awidth;
		//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_awidth/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 đồ.

Chúc các bạn thành công !

Chuyên Mục: HTML5, Javascript

Bài viết được đăng bởi webmaster