Code JavaScript tạo biểu đồ tuyến nhiều chuỗi dữ liệu dạng bậc thang
Multi Series Step Line Chart - Biểu đồ/đồ thị tuyến đa bậc trên CanvasJS hữu ích khi bạn so sánh nhiều xu hướng cho các sự kiện không diễn ra liên tục về bản chất. Đồ thị dạng đường Multi-series Step Line cho phép vẽ biểu đồ nhiều bộ dữ liệu, đồng thời khiến việc so sánh nó dễ dàng hơn.
Ví dụ bên dưới minh họa một mẫu biểu đồ Multi Series Step Line Chart được tạo bằng code JavaScript. Bạn có thể tinh chỉnh mã nguồn trong trình duyệt hoặc lưu về máy để chạy nội bộ.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart= new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Biểu đồ StepLine nhiều chuỗi với dữ liệu null"
},
axisX: {
valueFormatString: "DD MMM"
},
axisY2: {
minimum:25
},
toolTip: {
shared: true
},
data: [{
type: "stepLine",
connectNullData: true,
xValueFormatString: "MMM",
dataPoints: [
{ x: new Date(2008,02), y: 15.00 },
{ x: new Date(2008,03), y: 14.50 },
{ x: new Date(2008,04), y: 14.00 },
{ x: new Date(2008,05), y: 14.50 },
{ x: new Date(2008,06), y: 14.75 },
{ x: new Date(2008,07), y: null },
{ x: new Date(2008,08), y: 15.80 },
{ x: new Date(2008,09), y: 17.50 }
]
},
{
type: "stepLine",
axisYType: "secondary",
connectNullData: true,
xValueFormatString: "MMM",
dataPoints: [
{ x: new Date(2008,02), y: 41.00 },
{ x: new Date(2008,03), y: 43.50 },
{ x: new Date(2008,04), y: 41.00 },
{ x: new Date(2008,05), y: null },
{ x: new Date(2008,06), y: 47.55 },
{ x: new Date(2008,07), y: 45.00 },
{ x: new Date(2008,08), y: 40.70 },
{ x: new Date(2008,09), y: 37.00 }
]
}]
});
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ể tùy biến một số thuộc tính trong code mẫu JavaScript tạo biểu đồ trên để minh họa dữ liệu theo cách mong muốn. Ví dụ:
- Dùng thuộc tính
connectNullData
để vẽ một đường thẳng khi gặp các mốc dữ liệu trống thay vì hiện đường gián đoạn. - Dùng
nullDataDashType
để chỉnh sửa kiểu nét gạch của đường đang kết nối. ShowInLegend
- Hiện chú giảiShared (toolTip)
- Chia sẻ tooltip
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
-
Tổng hợp 1001+ thuật ngữ trong Liên Quân Mobile
3 ngày 7 -
11 cách mở Recycle Bin trên Windows
Hôm qua -
Outlook là gì? Cách sử dụng Outlook cho người mới
3 ngày -
Cách kích hoạt Windows Subsystem for Linux trên Windows
2 ngày -
Tại sao khởi động lại router có thể khắc phục được nhiều vấn đề?
Hôm qua -
Cách tìm tài khoản liên kết với địa chỉ email
2 ngày -
Khối D01 thi môn nào, học ngành nào?
2 ngày -
19/5 là ngày gì? Ngày 19 tháng 5 năm 1890 là ngày gì?
Hôm qua 6 -
Cách thức tỉnh trái ác quỷ Blox Fruit
3 ngày -
Cách xóa Fanpage Facebook trên điện thoại, máy tính
Hôm qua