Dễ dàng tạo biểu đồ trên web với Chart.js

07/06/2015

Các biểu đồ thường được dùng để thống kê theo một số liệu nào đó, và nó thường rất hay được sử dụng ở những trang admin, dùng để tổng kết lại dữ liệu thu nhập từ người dùng. Hôm nay, mình sẽ chia sẻ cho các bạn cách hiển thị những biểu đồ hình cột , hình tròn… rất đơn giản với sự hỗ trợ của Chart.js

Dễ dàng tạo biểu đồ trên web với Chart.js

Xem Demo | Download

Việc đầu tiên, các bạn cần làm là  download Chart.js .Các bạn copy Chart.min.js và chèn vào web như sau.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Chart.js demo</title>
        <script src='Chart.min.js'></script>
    </head>
    <body>
    </body>
</html>

Biểu đồ đường (Line Chart)

Để vẽ theo dạng này, thì các bạn chèn thêm đoạn html để hiển thị biểu đồ như sau :

<canvas id="buyers" width="600" height="400"></canvas>

Kế tiếp ,các bạn cần một đoạn script để nhận giá trí từ phần tử canvas, các bạn chèn thêm đoạn script sau vào bên dưới trước thẻ </body>

<script>
// line chart data
    var buyerData = {
	labels : ["January","February","March","April","May","June"],
	datasets : [
		{
			fillColor : "rgba(172,194,132,0.4)",
			strokeColor : "#ACC26D",
			pointColor : "#fff",
			pointStrokeColor : "#9DB86D",
			data : [203,156,99,251,305,247]
		}
	]
}
    var buyers = document.getElementById('buyers').getContext('2d');
    new Chart(buyers).Line(buyerData);
</script>

Biểu đồ hình tròn (Pie Chart)

Các bạn cũng cần chèn thêm đoạn html như sau :

<canvas id="countries" width="600" height="400"></canvas>

Kế đến là khai báo dữ liệu và hiển thị nó bằng đoạn script sau :

// pie chart data
	var pieData = [
		{
			value: 20,
			color:"#878BB6"
		},
		{
			value : 40,
			color : "#4ACAB4"
		},
		{
			value : 10,
			color : "#FF8153"
		},
		{
			value : 30,
			color : "#FFEA88"
		}
	];

	// pie chart options
	var pieOptions = {
		segmentShowStroke : false,
		animateScale : true
	}

	// get pie chart canvas
	var countries= document.getElementById("countries").getContext("2d");

	// draw pie chart
	new Chart(countries).Pie(pieData, pieOptions);

Biểu đồ hình cột (Bar chart)

Tương tự như các biểu đồ bên trên, chúng ta làm lần lượt với việc đầu tiên là chèn phần tử canvas để hiển thị biểu đồ.

<canvas id="income" width="600" height="400"></canvas>

Kế đến là chèn đoạn script.

// bar chart data
	var barData = {
	labels : ["January","February","March","April","May","June"],
	datasets : [
		{
			fillColor : "#48A497",
			strokeColor : "#48A4D1",
			data : [456,479,324,569,702,600]
		},
		{
			fillColor : "rgba(73,188,170,0.4)",
			strokeColor : "rgba(72,174,209,0.4)",
			data : [364,504,605,400,345,320]
		}
		]
	}

	// get bar chart canvas
	var income = document.getElementById("income").getContext("2d");

	// draw bar chart
	new Chart(income).Bar(barData);

Thế là xong, mình đã giới thiệu cho các bạn 3 dạng biểu đồ chính, các bạn có thể áp dụng ngay vào cho chính website hay blog của mình rồi đó,

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

Tags:

Chuyên Mục:

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !