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
-
Code JavaScript tạo biểu đồ thanh có ngắt trục tọa độ
-
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
-
Code JavaScript tạo biểu đồ/đồ thị cột theo phạm vi
-
Tổng hợp bài tập JavaScript có code mẫu
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ/đồ thị cột dạng xếp chồng
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường


Cũ vẫn chất
-
Code Anime Fighters Simulator mới nhất tháng 16/02/2025
Hôm qua -
Những mạng riêng ảo hữu ích trên Google Chrome
Hôm qua -
Những câu nói bá đạo của học sinh khiến ai cũng nhớ tới một thời cắp sách tới trường
2 ngày -
4 cách thay đổi loại tài khoản người dùng trong Windows
Hôm qua 1 -
Cách khắc phục thư mục Downloads không phản hồi trên Windows
Hôm qua -
VirtualBox và VMware Player: Máy ảo nào tốt nhất cho Windows?
2 ngày -
Văn khấn cúng xe cuối năm, bài khấn cúng xe tất niên
Hôm qua -
5 cách tra cứu mã số thuế TNCN nhanh, đơn giản
2 ngày -
Hướng dẫn tạo hiệu ứng động trong Canva
2 ngày -
Khối D01 thi môn nào, học ngành nào?
Hôm qua