Code JavaScript tạo biểu đồ & đồ thị vùng dạng xếp chồng 100%
Stacked Area 100% trên CanvasJS tương tự như biểu đồ vùng dạng xếp chồng, ngoại trừ các vùng được hiển thị dưới dạng phần trăm của giá trị tổng ở mọi điểm được cung cấp.
Stacked Area 100% được hình thành bằng cách xếp chồng nhiều chuỗi dữ liệu. Bạn có thể tương tác với dạng biểu đồ này, đồng thời thêm hiệu ứng động, thu phóng, xoay & xuất nó dưới dạng ảnh.
Ví dụ bên dưới minh họa một mẫu biểu đồ vùng dạng xếp chồng hoàn toàn kèm code JavaScript chi tiết. Bạn có thể chỉnh sửa mã nguồn 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: "Sản phẩm công ty trách nhiệm hữu hạn XYZ tiêu thụ vào năm 2016"
},
axisX:{
title: "Mùa",
minimum: -0.02,
maximum: 3.02
},
axisY:{
title:"Doanh thu"
},
toolTip:{
shared: true
},
data: [{
type: "stackedArea100",
name: "Mosquito Repellents",
showInLegend: "true",
dataPoints: [
{ y: 83450 , label: "Xuân" },
{ y: 51240, label: "Hạ" },
{ y: 64120, label: "Thu" },
{ y: 71450, label: "Đông" }
]
},
{
type: "stackedArea100",
name: "Liquid Soap",
showInLegend: "true",
dataPoints: [
{ y: 20140 , label: "Xuân" },
{ y: 30170, label: "Hạ" },
{ y: 24410, label: "Thu" },
{ y: 38120, label: "Đông" }
]
},
{
type: "stackedArea100",
name: "Napkins",
showInLegend: "true",
dataPoints: [
{ y: 45120 , label: "Xuân" },
{ y: 50350, label: "Hạ" },
{ y: 48410, label: "Thu" },
{ y: 53120, label: "Đông" }
]
},
{
type: "stackedArea100",
name: "Sanitizer",
showInLegend: "true",
dataPoints: [
{ y: 11050, label: "Xuân" },
{ y: 16100, label: "Hạ" },
{ y: 15010, label: "Thu" },
{ y: 23100, label: "Đông" }
]
}]
});
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 một số thuộc tính để tạo biểu đồ vùng như ý muốn. Ví dụ:
markerType
: thay đổi kiểu đánh dấu chú thíchmarkerSize
: kích thước đánh dấumarkerColor
: màu sắc đánh dấumarkerBorderColor
: màu đường viền đánh dấu
Và nhiều hơn thế nữa.
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
-
LEFT JOIN trong SQL
Hôm qua -
Hàng ngày hay hằng ngày? Khi nào dùng 'hàng ngày', khi nào dùng 'hằng ngày'
Hôm qua -
AOE 1, Đế Chế 1 cho PC
-
50 câu ca dao, tục ngữ về đạo đức, đạo lý làm người hay và sâu sắc
Hôm qua -
Số thực là gì?
Hôm qua -
Làm sao để biết ai đó đã chặn bạn trên TikTok?
Hôm qua -
Top ứng dụng Android đang miễn phí và giảm giá 09/10/2025
Hôm qua 8 -
Những stt hay nói về sự phản bội trong tình bạn
Hôm qua -
4 cách hẹn giờ tắt máy tính dễ dàng, nhanh, đơn giản nhất
Hôm qua -
Cách xem ai chặn bạn trên Facebook rất đơn giản
Hôm qua