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ộ.
<!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
…
402
Bạn nên đọc
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code mẫu JavaScript tạo biểu đồ với dữ liệu trống hoặc null
-
Code mẫu JavaScript tạo biểu đồ có ảnh ở phía trên
-
Code mẫu biểu đồ được đồng bộ hóa trong JavaScript
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code JavaScript tạo mẫu biểu đồ & đồ thị động
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Có thể bạn quan tâm
-
Code JavaScript tạo mẫu biểu đồ Pareto với nhãn Index/Data
-
Code JavaScript tạo biểu đồ & đồ thị sai số
-
Code JavaScript tạo biểu đồ & đồ thị Pareto
-
Code JavaScript tạo biểu đồ/đồ thị phân tán/điểm
-
Code JavaScript tạo biểu đồ/đồ thị đường sai số
-
Code JavaScript tạo biểu đồ box và whisker chứa điểm ngoại lai