Code mẫu JavaScript tạo biểu đồ với dữ liệu trống hoặc null
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ộ.
<!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.
Bạn nên đọc
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:


Cũ vẫn chất
-
Game luyện chuột, game nhanh tay lẹ mắt trên máy tính
Hôm qua 3 -
Cap kỉ niệm ngày cưới, stt kỷ niệm ngày cưới ý nghĩa và ngọt ngào
Hôm qua -
45 câu đố vui cho trẻ về nghề nghiệp
Hôm qua -
Hướng dẫn đóng dấu ngoặc số âm trong Excel
Hôm qua 1 -
Cách tính BHXH 1 lần, hưởng BHXH 1 lần mới nhất
Hôm qua -
Hàm trong Python là gì? Các hàm trong Python
Hôm qua 2 -
Mảng trong Python
Hôm qua -
Code Roblox mới nhất tháng 10 và cách nhập Roblox Promo Code 2025
Hôm qua 6 -
Cách thiết lập VPN trên iPhone hoặc iPad
Hôm qua 3 -
Firmware là gì? Firmware khác Software như thế nào?
Hôm qua