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
-
Cách cài đặt và khởi động kép Linux trên máy Mac
Hôm qua -
6 cách đánh số trang trong Excel cực nhanh và dễ
Hôm qua -
Ưu và nhược điểm của Internet
Hôm qua -
Cách tạo dòng dấu chấm trong Excel
Hôm qua -
Cách tính phần trăm (%) trong Google Sheets
Hôm qua -
RAM cache là gì? Làm sao để xóa cache này trên Windows?
Hôm qua -
Cách khắc phục lỗi bo mạch chủ hiện đèn báo màu đỏ
Hôm qua -
Xe đạp bánh tam giác chạy được như xe đạp thông thường
Hôm qua -
11 mẹo vặt vô cùng hữu ích mà người đeo kính nhất định phải biết
Hôm qua -
Cách thay đổi thiết lập con chuột trong Windows
Hôm qua