Code JavaScript tạo mẫu biểu đồ/đồ thị vùng dạng bậc thang

Kun cute

Biểu đồ vùng Step Area được vẽ bằng cách kết nối các điểm dữ liệu dùng đường thẳng, ngang và tô bóng vùng kín. Nó hữu ích khi dữ liệu thay đổi ở các khoảng thời gian rời rạc, không đồng nhất. Kiểu biểu đồ này có thể tương tác và hỗ trợ hoạt ảnh, thu phóng, xoay & xuất dưới dạng ảnh.

Ví dụ bên dưới hiện mẫu biểu đồ vùng dạng Step Area được tạo bằng JavaScript. Bạn sẽ có cả code mẫu JavaScript tạo biểu đồ để chỉnh sửa trong trình duyệt hoặc lưu về máy chạy nội bộ.

Code mẫu JavaScript tạo biểu đồ dạng bậc thang

<!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Mức độ hài lòng của khách hàng dựa trên đánh giá"
	},
	axisY: {
		title: "Khách hàng hài lòng",
		includeZero: true,
		suffix: "%"
	},
	data: [{
		type: "stepArea",
		markerSize: 5,
		xValueFormatString: "YYYY",
		yValueFormatString: "#,##0.##\"%\"",
		dataPoints: [
			{ x: new Date(2010, 0), y: 34 },
			{ x: new Date(2011, 0), y: 73 },
			{ x: new Date(2012, 0), y: 78 },
			{ x: new Date(2013, 0), y: 82 },
			{ x: new Date(2014, 0), y: 70 },
			{ x: new Date(2015, 0), y: 86 },
			{ x: new Date(2016, 0), y: 80 }
		]
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Nguồn: CanvasJS