Code mẫu JavaScript tạo biểu đồ với dữ liệu trống hoặc null

Kandy parfume

Nếu xử lý dữ liệu là một phần trong công việc hàng ngày của bạn, ắt hẳn không ít lần bạn gặp phải trường hợp thiếu một số thông tin trong chuỗi dữ liệu. Những giá trị đó gọi là null hay dữ liệu trống.

Ví dụ bên dưới minh họa một đồ thị theo vùng với giá trị null/bị thiếu. Nó cũng bao gồm code nguồn HTML/JavaScript mà bạn có thể chỉnh sửa trong trình duyệt hoặc lưu để chạy biểu đồ nội bộ.

Biểu đồ chứa null tạo bằng JavaScript

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title: {
		text: "Sử dụng CPU trung bình hàng giờ"
	},
	axisX: {
		title: "Thời gian"
	},
	axisY: {
		title: "Phần trăm",
		suffix: "%",
		includeZero: true
	},
	data: [{
		type: "line",
		name: "SỬ dụng CPU",
		connectNullData: true,
		//nullDataLineDashType: "solid",
		xValueType: "dateTime",
		xValueFormatString: "DD MMM hh:mm TT",
		yValueFormatString: "#,##0.##\"%\"",
		dataPoints: [
			{ x: 1501048673000, y: 35.939 },
			{ x: 1501052273000, y: 40.896 },
			{ x: 1501055873000, y: 56.625 },
			{ x: 1501059473000, y: 26.003 },
			{ x: 1501063073000, y: 20.376 },
			{ x: 1501066673000, y: 19.774 },
			{ x: 1501070273000, y: 23.508 },
			{ x: 1501073873000, y: 18.577 },
			{ x: 1501077473000, y: 15.918 },
			{ x: 1501081073000, y: null }, // Null Data
			{ x: 1501084673000, y: 10.314 },
			{ x: 1501088273000, y: 10.574 },
			{ x: 1501091873000, y: 14.422 },
			{ x: 1501095473000, y: 18.576 },
			{ x: 1501099073000, y: 22.342 },
			{ x: 1501102673000, y: 22.836 },
			{ x: 1501106273000, y: 23.220 },
			{ x: 1501109873000, y: 23.594 },
			{ x: 1501113473000, y: 24.596 },
			{ x: 1501117073000, y: 31.947 },
			{ x: 1501120673000, y: 31.142 }
		]
	}]
});
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 đồ

Bạn có thể kết nối các điểm dữ liệu liền kề không phải null để thể hiện tính liên tục trong biểu đồ theo vùng hoặc đường thẳng bằng thuộc tính connectNullData. Đường null-data có thể được tùy biến sâu hơn bằng nullDataLineDashType.

Một số tùy chỉnh khác bao gồm color, fillOpacity, markerType…

Trên đây là code mẫu tạo biểu đồ sinh động bằng JavaScript với các trường dành cho dữ liệu trống hay null. Hi vọng bài viết hữu ích với các bạn.

Thứ Ba, 27/12/2022 17:07

5 ★ 1 👨 129

#JavaScript