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
-

Tổng hợp phím tắt Đấu Trường Chân Lý
Hôm qua -

Kết quả của các trận đấu trong Record of Ragnarok
Hôm qua -

Cách mở Control Panel trên Windows 11
Hôm qua -

Hàm Round, cách dùng hàm làm tròn trong Excel
Hôm qua -

Cách tạo sticker tùy chỉnh trên Telegram
Hôm qua -

Cách view source, xem mã nguồn trang web bằng điện thoại, máy tính
Hôm qua 1 -

Cách thay đổi thiết lập con chuột trong Windows
Hôm qua -

Sáng lạng hay xán lạn, từ nào đúng chính tả?
Hôm qua -

6 cách đánh số trang trong Excel cực nhanh và dễ
Hôm qua -

Câu nói hay về người thứ ba, stt về người thứ ba trong tình yêu thâm thúy
Hôm qua
Học IT
Công nghệ
Microsoft Word 2013
Microsoft Word 2007
Microsoft Excel 2019
Microsoft Excel 2016
Microsoft PowerPoint 2019
Google Sheets
Lập trình Scratch
Bootstrap
Hướng dẫn
Ô tô, Xe máy