Code mẫu JavaScript tạo biểu đồ có ngắt trục/tỷ lệ

Kandy Kandy

Ngắt trục hoặc theo tỷ lệ được dùng khi một số giá trị của mốc dữ liệu trong chuỗi cực kỳ cao hoặc thấp. Chính vì thế, thật khó thấy sự khác biệt giữa các giá trị nhỏ hơn. Biểu đồ chứa đường ngắt trục/chia tỷ lệ thường được dùng nhằm giúp người xem dễ đọc dữ liệu trong những trường hợp như thế.

Ví dụ bên dưới hiển thị GDP bình quân đầu người ở các quốc gia khác nhau vào năm 2022 bằng một biểu đồ cột JavaScript với các điểm ngắt trục/tỷ lệ trên trục Y. Nó cũng chứa mã nguồn mà bạn có thể chỉnh sửa trong trình duyệt hoặc lưu để chạy nội bộ.

Mẫu biểu đồ có ngắt trục bằng JavaScript

Code mẫu JavaScript tạo biểu đồ có đường ngắt trục dạng lượn sóng:

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2", // bạn có thể thay bằng "light1", "light2", "dark1", "dark2"
	title: {
		text: "GDP bình quân đầu người - 2022"
	},
	subtitles: [{
		text: "Đơn vị tính: USD",
		fontSize: 16
	}],
	axisY: {
		prefix: "$",
		scaleBreaks: {
			customBreaks: [{
				startValue: 10000,
				endValue: 35000
			}]
		}
	},
	data: [{
		type: "column",
		yValueFormatString: "$#,##0.00",
		dataPoints: [
			{ label: "Mỹ", y: 57466.787 },
			{ label: "Australi", y: 49927.82 },
			{ label: "Vương quốc Anh", y: 39899.388 },
			{ label: "UAE", y: 37622.207 },
			{ label: "Brazil", y: 8649.948 },
			{ label: "Trung Quốc", y: 8123.181 },
			{ label: "Indonesia", y: 3570.295 },
			{ label: "Ấn Độ", y: 1709.387 }	
		]
	}]
});
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 biến biểu đồ

Ngắt trục/chia tỷ lệ tự động được áp dụng nếu bạn bao gồm scaleBreaks trong đối tượng trục. Bạn có thể ngắt trục theo cách thủ công bằng việc thêm một thành phần customBreaks với startValue & endValue.

Những lựa chọn tùy biến khác, được dùng thường xuyên là: collapsibleThreshold - ngưỡng thu gọn, spacing - khoảng cách, type - kiểu, lineColor - màu đường thẳng…

Trên đây là code JavaScript tạo mẫu biểu đồ có đường ngắt trục đơn giản nhất. Hi vọng bài viết hữu ích với các bạn.

Thứ Năm, 05/01/2023 16:43

5 ★ 1 👨 197

#JavaScript