Code JavaScript tạo biểu đồ & đồ thị vùng dạng xếp chồng
JavaScript Stacked Area Chart - Biểu đồ vùng dạng xếp chồng từ JavaScript được tạo thành bằng cách xếp chồng nhiều chuỗi dữ liệu. Biểu đồ/đồ thị này hữu ích khi bạn muốn so sánh thuộc tính của hai hoặc nhiều chuỗi dữ liệu so với tổng số.
Stacked Area Charts có tính tương tác, hỗ trợ hoạt ảnh, thu phóng, xoay & xuất biểu đồ dưới dạng ảnh. Ví dụ bên dưới minh họa một mẫu biểu đồ JavaScript dạng xếp chồng cùng với mã nguồn HTML. Bạn có thể chỉnh sửa code 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: "Lượt tải app trên iTunes và Play Store"
},
axisY :{
valueFormatString: "#0,.",
suffix: "k"
},
axisX: {
title: "Tháng sau khi ra mắt"
},
toolTip: {
shared: true
},
data: [{
type: "stackedArea",
showInLegend: true,
toolTipContent: "<span style=\"color:#4F81BC\"><strong>{name}: </strong></span> {y}",
name: "iOS",
dataPoints: [
{ x: 1, y: 3000 },
{ x: 2, y: 7000 },
{ x: 3, y: 10000 },
{ x: 4, y: 14000 },
{ x: 5, y: 23000 },
{ x: 6, y: 31000 },
{ x: 7, y: 42000 },
{ x: 8, y: 56000 },
{ x: 9, y: 64000 },
{ x: 10, y: 81000 },
{ x: 11, y: 105000 }
]
},
{
type: "stackedArea",
name: "Android",
toolTipContent: "<span style=\"color:#C0504E\"><strong>{name}: </strong></span> {y}<br><b>Total:<b> #total",
showInLegend: true,
dataPoints: [
{ x: 4, y: 4000 },
{ x: 5, y: 6000 },
{ x: 6, y: 9000 },
{ x: 7,y: 14000 },
{ x: 8,y: 21000 },
{ x: 9, y: 31000 },
{ x: 10, y: 46000 },
{ x: 11, y: 61000 }
]
}]
});
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ể thay đổi đánh dấu bằng cách dùng thuộc tính markerType
và thay đổi kích thước của nó bằng markerSize
. Một số tùy biến khác bao gồm:
fillOpacity
- Độ mờ lấp dầyColor
- Màu sắclineThickness
- Độ dày đường thẳng
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
2 ngày 7 -
Code Wuthering Waves mới nhất 18/05/2025 và hướng dẫn đổi code
3 ngày -
Cách thức tỉnh trái ác quỷ Blox Fruit
2 ngày -
Khối D01 thi môn nào, học ngành nào?
Hôm qua -
Cách tìm tài khoản liên kết với địa chỉ email
Hôm qua -
Outlook là gì? Cách sử dụng Outlook cho người mới
2 ngày -
Hình nền trắng, ảnh nền trắng đẹp
3 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 -
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 kích hoạt Windows Subsystem for Linux trên Windows
Hôm qua