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
-
Cách xem số thẻ MBBank trên ứng dụng
Hôm qua -
Cách kiểm tra số dư tài khoản Sacombank rất đơn giản
Hôm qua -
‘Từ điển’ tiếng Huế thông dụng
Hôm qua -
Những ứng dụng hoán đổi khuôn mặt tốt nhất
Hôm qua -
5 cách mở cài đặt âm thanh trên PC Windows
Hôm qua 2 -
9 công cụ tạo video AI tốt nhất
Hôm qua -
Cách sửa lỗi gõ tiếng Việt trên Word, Excel
Hôm qua -
Cách khóa và mở khóa file Powerpoint để chỉnh sửa
Hôm qua -
Bluestacks
-
Cách tạo Slide Master trên PowerPoint
Hôm qua