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
292
Bài trước
Bạn nên đọc
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Cách xóa tin nhắn Telegram, lịch sử tin nhắn Telegram
Hôm qua -
Địa chỉ 26 cửa hàng Uniqlo chính hãng tại Việt Nam
Hôm qua -
Hướng dẫn chèn chữ vào ảnh trong Word
Hôm qua -
Cách xem thông tin chi tiết về hệ thống và phần cứng Linux trên dòng lệnh
Hôm qua -
Lời chúc ngày Gia đình Việt Nam 28/6 hay và ý nghĩa
Hôm qua 2 -
Cách sử dụng lịch sử Clipboard trong Windows 10
Hôm qua -
Code HTHT mới nhất tháng 2, giftcode Huyền Thoại Hải Tặc mới nhất 2024
Hôm qua 23 -
Câu lệnh COALESCE trong SQL Server
Hôm qua -
Code GoGo Tam Quốc mới nhất
Hôm qua -
Gia chủ tuổi Tuất nên chọn ai xông đất, xông nhà hợp năm 2024
Hôm qua 1