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