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

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

Tùy chỉnh biểu đồ

Tất nhiên, bạn có thể thay đổi mẫu biểu đồ này như ý muốn khi chỉnh sửa một số thuộc tính, chẳng hạn như:

  • Color - Màu sắc
  • fillOpacity - Độ mờ được lấp đầy
  • lineThickness - Độ dày của đường thẳng
  • lineColor - Màu sắc của đường thẳng
  • lineDashType - Kiểu nét gạch ngang
Thứ Sáu, 10/02/2023 15:54
51 👨 229
0 Bình luận
Sắp xếp theo
    ❖ JavaScript