Code mẫu JavaScript tạo biểu đồ có ngắt trục/tỷ lệ
Ngắt trục hoặc theo tỷ lệ được dùng khi một số giá trị của mốc dữ liệu trong chuỗi cực kỳ cao hoặc thấp. Chính vì thế, thật khó thấy sự khác biệt giữa các giá trị nhỏ hơn. Biểu đồ chứa đường ngắt trục/chia tỷ lệ thường được dùng nhằm giúp người xem dễ đọc dữ liệu trong những trường hợp như thế.
Ví dụ bên dưới hiển thị GDP bình quân đầu người ở các quốc gia khác nhau vào năm 2022 bằng một biểu đồ cột JavaScript với các điểm ngắt trục/tỷ lệ trên trục Y. Nó cũng chứa mã nguồn mà bạn có thể chỉnh sửa trong trình duyệt hoặc lưu để chạy nội bộ.
Code mẫu JavaScript tạo biểu đồ có đường ngắt trục dạng lượn sóng:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // bạn có thể thay bằng "light1", "light2", "dark1", "dark2"
title: {
text: "GDP bình quân đầu người - 2022"
},
subtitles: [{
text: "Đơn vị tính: USD",
fontSize: 16
}],
axisY: {
prefix: "$",
scaleBreaks: {
customBreaks: [{
startValue: 10000,
endValue: 35000
}]
}
},
data: [{
type: "column",
yValueFormatString: "$#,##0.00",
dataPoints: [
{ label: "Mỹ", y: 57466.787 },
{ label: "Australi", y: 49927.82 },
{ label: "Vương quốc Anh", y: 39899.388 },
{ label: "UAE", y: 37622.207 },
{ label: "Brazil", y: 8649.948 },
{ label: "Trung Quốc", y: 8123.181 },
{ label: "Indonesia", y: 3570.295 },
{ label: "Ấn Độ", y: 1709.387 }
]
}]
});
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 đồ
Ngắt trục/chia tỷ lệ tự động được áp dụng nếu bạn bao gồm scaleBreaks trong đối tượng trục. Bạn có thể ngắt trục theo cách thủ công bằng việc thêm một thành phần customBreaks
với startValue
& endValue
.
Những lựa chọn tùy biến khác, được dùng thường xuyên là: collapsibleThreshold
- ngưỡng thu gọn, spacing
- khoảng cách, type
- kiểu, lineColor
- màu đường thẳng…
Trên đây là code JavaScript tạo mẫu biểu đồ có đường ngắt trục đơn giản nhất. Hi vọng bài viết hữu ích với các bạn.
Bạn nên đọc
-
Tổng hợp bài tập JavaScript có code mẫu
-
JavaScript là gì?
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code JavaScript tạo mẫu biểu đồ thay đổi dữ liệu tại thời gian thực
-
Code mẫu JavaScript tạo biểu đồ với các điểm dữ liệu có thể kéo
-
Code mẫu JavaScript tạo biểu đồ với số lượng lớn điểm dữ liệu
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code JavaScript tạo biểu đồ/đồ thị động
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
-
Danh sách DNS tốt, nhanh nhất của Google, VNPT, FPT, Viettel, Singapore
Hôm qua -
Hướng dẫn tải Minecraft miễn phí trên iPhone
Hôm qua 3 -
5 code trái tim đập của thủ khoa Lý có tên, chèn ảnh
Hôm qua 14 -
Cách xóa trang trắng trong Word cực dễ
Hôm qua 2 -
Status kỷ niệm ngày yêu siêu lãng mạn cho các cặp đôi
Hôm qua 1 -
Công thức lượng giác đầy đủ nhất cho lớp 9, lớp 10, lớp 11
Hôm qua 1 -
Stt năng lượng tích cực truyền cảm hứng và sức mạnh cho bạn
Hôm qua -
Cách fake tin nhắn iPhone, chế tin nhắn Messenger
Hôm qua -
Bài tập C++ có giải (code mẫu) về biến, kiểu dữ liệu và toán tử
Hôm qua 1 -
Lịch phát sóng VTV1 hôm nay 21/06/2025
Hôm qua