RSSJquery

Chart.js - Plugin hỗ trợ tạo biểu đồ

Chart.js là một plugin để hỗ trợ tạo biểu đồ dựa trên HTML5 Canvas. Miễn phí, dung lượng nhỏ và hỗ trợ tùy biến cao. Y2Graphic giới thiệu cách đưa biểu đồ vào website thông qua plugin trên.

Chart.js hỗ trợ đến 6 biểu đồ khác nhau, bao gồm:

Các bạn tham khảo tại đây : http://www.chartjs.org/

Chart.js - Plugin hỗ trợ tạo biểu đồ

Line chart

Chart.js - Plugin hỗ trợ tạo biểu đồ

Bar chart

Chart.js - Plugin hỗ trợ tạo biểu đồ

Radar chart

Chart.js - Plugin hỗ trợ tạo biểu đồ

Polar area chart

Chart.js - Plugin hỗ trợ tạo biểu đồ

Pie chart

Chart.js - Plugin hỗ trợ tạo biểu đồ

Doughnut chart
 

Và mình sẽ hướng dẫn tổng quát cách đưa biểu đồ Line chartvào website. Việc đầu tiên là đưa đoạn script và đặt trong thẻ <head>

  
  <script src="/path/Chart.js"></script>
  

HTML

Khai báo biểu đồ:

  
 <canvas id="canvas" height="450" width="600"></canvas>
  

Cuối cùng là khai báo các số liệu của biểu đồ. Đặt trong thẻ <body>

 
  <script>

		var lineChartData = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					data : [65,59,90,81,56,55,40]
				},
				{
					fillColor : "rgba(151,187,205,0.5)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					data : [28,48,40,19,96,27,100]
				}
			]
			
		}

	var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
	
	</script>
  
Nguồn: Y2Graphic

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu