Học CNTT

Code JavaScript tạo mẫu biểu đồ thay đổi dữ liệu tại thời gian thực

Biểu đồ động JavaScript Dynamic / Live hữu ích trong việc hiển thị dữ liệu thay đổi theo thời gian như giá cổ phiếu, nhiệt độ, đọc cảm biến tại thời gian thực… Dynamic Chart còn được biết đến với tên gọi là biểu đồ Real Time. Cập nhật dữ liệu trực tiếp cũng được hỗ trợ trên mọi kiểu biểu đồ/đồ thị bao gồm dạng line, area, column, bar, pie…

Dưới đây là một mẫu biểu đồ cập nhật dữ liệu trực tiếp tại thời gian thực cùng với mã nguồn HTML/JavaScript. Bạn có thể chỉnh sửa nó trong trình duyệt hoặc lưu để chạy nội bộ.

Code JavaScript tạo biểu đồ dữ liệu thay đổi theo thời gian

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

var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer", {
	title :{
		text: "Dynamic Data"
	},
	data: [{
		type: "line",
		dataPoints: dps
	}]
});

var xVal = 0;
var yVal = 100; 
var updateInterval = 1000;
var dataLength = 20; // number of dataPoints visible at any point

var updateChart = function (count) {

	count = count || 1;

	for (var j = 0; j < count; j++) {
		yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
		dps.push({
			x: xVal,
			y: yVal
		});
		xVal++;
	}

	if (dps.length > dataLength) {
		dps.shift();
	}

	chart.render();
};

updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);

}
</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ể thay đổi màu hoặc độ dày của đường nét bằng lineColor và lineThickness. Một số tùy biến khác bao gồm markerSize, markerType, label…

Thứ Hai, 02/01/2023 16:45
3 ★ 1 👨 645
#JavaScript

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!
Số điện thoại này đã được xác thực!
Bạn có thể dùng Sđt này đăng nhập tại đây!
Lỗi gửi SMS, liên hệ Admin
0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi
❖ JavaScript
Biểu đồ JavaScript