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
-
Lên đồ Ashe DTCL mùa 11, đồ Ashe mùa 11 DTCL
Hôm qua -
Cách dịch trang web sang tiếng Việt, tiếng Anh hoặc ngôn ngữ bất kỳ
Hôm qua 1 -
Cách hiển thị biểu tượng Bluetooth bị thiếu trên Taskbar Windows
Hôm qua -
Spam là gì? Nó được hiểu như thế nào trong Zalo, LoL, Facebook…
Hôm qua -
Cách phân quyền cho người dùng trong MS SQL Server
Hôm qua -
Hướng dẫn mở rộng ảnh cực đơn giản không cần Photoshop
Hôm qua -
Cách khắc phục mã lỗi 0x80004005
Hôm qua -
Sửa lỗi phím tắt Windows + Shift + S không hoạt động trên Windows 10
Hôm qua -
Toán tử trong SQL
Hôm qua -
Cách chọn kênh WiFi tốt nhất cho router
Hôm qua