Code JavaScript tạo biểu đồ/đồ thị xếp chồng cột hoàn toàn
Biểu đồ xếp chồng cột hoàn toàn còn gọi là biểu đồ thanh xếp chồng 100% theo chiều dọc. Nó tương tự như các biểu đồ cột xếp chồng khác, ngoại trừ việc chiều cao từng cột được tính theo phần trăm của tổng số. Điều này cho phép bạn so sánh giá trị của từng chuỗi dữ liệu với tổng số theo phần trăm. Kiểu biểu đồ này cũng có tính tương tác, đáp ứng, hỗ trợ hoạt ảnh & xuất dưới dạng ảnh.
Ví dụ bên dưới minh họa một mẫu biểu đồ cột xếp chồng 100% được tạo bằng JavaScript. Bài viết cũng bao gồm mã nguồn cho bạn chỉnh sửa 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: "Thành phần lưu lượng truy cập Internet ở Bắc Mỹ"
},
axisX: {
interval: 1,
intervalType: "year",
valueFormatString: "YYYY"
},
axisY: {
suffix: "%"
},
toolTip: {
shared: true
},
legend: {
reversed: true,
verticalAlign: "center",
horizontalAlign: "right"
},
data: [{
type: "stackedColumn100",
name: "Thời gian thực",
showInLegend: true,
xValueFormatString: "YYYY",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{ x: new Date(2010,0), y: 40 },
{ x: new Date(2011,0), y: 50 },
{ x: new Date(2012,0), y: 60 },
{ x: new Date(2013,0), y: 61 },
{ x: new Date(2014,0), y: 63 },
{ x: new Date(2015,0), y: 65 },
{ x: new Date(2016,0), y: 67 }
]
},
{
type: "stackedColumn100",
name: "Duyệt web",
showInLegend: true,
xValueFormatString: "YYYY",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{ x: new Date(2010,0), y: 28 },
{ x: new Date(2011,0), y: 18 },
{ x: new Date(2012,0), y: 12 },
{ x: new Date(2013,0), y: 10 },
{ x: new Date(2014,0), y: 10 },
{ x: new Date(2015,0), y: 7 },
{ x: new Date(2016,0), y: 5 }
]
},
{
type: "stackedColumn100",
name: "Chia sẻ file",
showInLegend: true,
xValueFormatString: "YYYY",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{ x: new Date(2010,0), y: 15 },
{ x: new Date(2011,0), y: 12 },
{ x: new Date(2012,0), y: 10 },
{ x: new Date(2013,0), y: 9 },
{ x: new Date(2014,0), y: 7 },
{ x: new Date(2015,0), y: 5 },
{ x: new Date(2016,0), y: 1 }
]
},
{
type: "stackedColumn100",
name: "Khác",
showInLegend: true,
xValueFormatString: "YYYY",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{ x: new Date(2010,0), y: 17 },
{ x: new Date(2011,0), y: 20 },
{ x: new Date(2012,0), y: 18 },
{ x: new Date(2013,0), y: 20 },
{ x: new Date(2014,0), y: 20 },
{ x: new Date(2015,0), y: 23 },
{ x: new Date(2016,0), y: 27 }
]
}]
});
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ể bật chú giải bằng thuộc tính showInLegend
. Thay đổi vị trí của chú thích theo chiều dọc bằng verticalAlign
hoặc ngang bằng horizontalAlign
. Ngoài ra, bạn còn có thể thay đổi cả color
- màu sắc, shared(toolTip)
- chia sẻ tooltip và nhiều hơn thế nữa.
Bạn nên đọc
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code mẫu JavaScript tạo biểu đồ cột nhiều chuỗi dữ liệu
-
Code JavaScript tạo biểu đồ thanh đa chuỗi dữ liệu
-
Code JavaScript tạo biểu đồ/đồ thị cột theo phạm vi
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code JavaScript tạo biểu đồ/đồ thị cột dạng xếp chồng
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo biểu đồ thanh có ngắt trục tọa độ
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 sửa lỗi không tải được file lên Google Drive
Hôm qua 1 -
Cách ẩn/bỏ ẩn thanh Taskbar trên Windows 11
Hôm qua -
5 cách cơ bản để update, cập nhật driver cho máy tính
Hôm qua -
Cách đặt Google là công cụ tìm kiếm mặc định trên Microsoft Edge
Hôm qua -
Irelia DTCL: Lên đồ Irelia mùa 11, đồ chuẩn Irelia DTCL
Hôm qua -
Cách kiểm tra dung lượng ổ cứng máy tính
Hôm qua -
Cách đăng ký tài khoản Vk Free Fire
Hôm qua -
Yandere là gì? Tại sao Yandere lại đáng sợ thế?
Hôm qua -
Một số thủ thuật tùy biến Taskbar trên Windows 10 hiệu quả
Hôm qua 1 -
DLC Boot