Code JavaScript tạo biểu đồ & đồ thị vùng dạng xếp chồng 100%

Kandy Kandy

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ộ.

Một mẫu biểu đồ vùng được tạo bằng JavaScript

<!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ích
markerSize: kích thước đánh dấu
markerColor: màu sắc đánh dấu
markerBorderColor: màu đường viền đánh dấu

Và nhiều hơn thế nữa.

Thứ Sáu, 17/02/2023 14:58

5 ★ 1 👨 207

#JavaScript

Bạn nên đọc

Xác thực tài khoản!

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:

Số điện thoại chưa đúng định dạng!