JavaScript Code for Creating 100% Stacked Bar Chart/Graph (mới nhất 2023)

Để tạo biểu đồ cột 100% xếp chồng hoàn toàn bằng JavaScript, chúng ta có thể sử dụng thư viện nổi tiếng như Chart.js hoặc D3.js. Biểu đồ này hiển thị các cột với chiều cao tỷ lệ phần trăm của từng giá trị trong tổng giá trị của mỗi dòng dữ liệu. Việc tạo biểu đồ bằng mã JavaScript đảm bảo tính linh hoạt và dễ dàng tùy chỉnh. Sử dụng mã JavaScript, chúng ta có thể tạo các biểu đồ xếp chồng chính xác theo yêu cầu và trình bày dữ liệu một cách trực quan.

Code JavaScript tạo biểu đồ xếp chồng 100% cho các thanh đồ thị.

Biểu đồ xếp chồng thanh 100% trong JavaScript giống với biểu đồ xếp chồng thanh, chỉ khác là chiều cao của nó được tính bằng phần trăm. Điều này cho phép so sánh tỷ lệ dữ liệu với tổng phần trăm. Biểu đồ còn có tính tương tác, đáp ứng và hỗ trợ hoạt ảnh, xuất biểu đồ dưới dạng ảnh.

Dưới đây là một ví dụ mẫu của biểu đồ xếp chồng thanh 100% được tạo bằng JavaScript kèm theo mã nguồn HTML. Bạn có thể chỉnh sửa trong trình duyệt hoặc lưu về máy để chạy nội bộ.

“`html

Biểu đồ xếp chồng thanh 100%

“`

Biểu đồ xếp chồng được tạo bằng JavaScript

<!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2", //"light1", "dark1", "dark2"
	title:{
		text: "Số lượng sản phẩm đã bán trong quý II"             
	},
	axisY:{
		interval: 10,
		suffix: "%"
	},
	toolTip:{
		shared: true
	},
	data:[{
		type: "stackedBar100",
		toolTipContent: "{label}<br><b>{name}:</b> {y} (#percent%)",
		showInLegend: true, 
		name: "Tháng 4",
		dataPoints: [
			{ y: 600, label: "Water Filter" },
			{ y: 400, label: "Modern Chair" },
			{ y: 120, label: "VOIP Phone" },
			{ y: 250, label: "Microwave" },
			{ y: 120, label: "Water Filter" },
			{ y: 374, label: "Expresso Machine" },
			{ y: 350, label: "Lobby Chair" }
		]
		},
		{
			type: "stackedBar100",
			toolTipContent: "<b>{name}:</b> {y} (#percent%)",
			showInLegend: true, 
			name: "Tháng 5",
			dataPoints: [
				{ y: 400, label: "Bộ lọc nước" },
				{ y: 500, label: "Ghế hiện đại" },
				{ y: 220, label: "Điện thoại VOIP" },
				{ y: 350, label: "Lò vi sóng" },
				{ y: 220, label: "Máy lọc nước" },
				{ y: 474, label: "Máy pha cà phê Expresso" },
				{ y: 450, label: "Ghế tựa" }
			]
		}, 
		{
			type: "stackedBar100",
			toolTipContent: "<b>{name}:</b> {y} (#percent%)",
			showInLegend: true, 
			name: "Tháng 6",
			dataPoints: [
				{ y: 300, label: "Bộ lọc nước" },
				{ y: 610, label: "Ghế hiện đại" },
				{ y: 215, label: "Điện thoại VOIP" },
				{ y: 221, label: "Lò vi sóng" },
				{ y: 75, label: "Máy lọc nước" },
				{ y: 310, label: "Máy pha cà phê Expresso" },
				{ y: 340, label: "Ghế tựa" }
			]
	}]
});
chart.render();

}
</script>
</head>
<body>
<div  ></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Tài liệu: CanvasJS

Tùy biến biểu đồ

Bạn có thể điều chỉnh chiều rộng của thanh bằng cách sử dụng thuộc tính dataPointWidth hoặc thay đổi màu sắc của nó bằng thuộc tính color. Bạn cũng có thể hiển thị chú giải bằng cách sử dụng thuộc tính showInLegend. Một số tùy chọn tùy chỉnh khác bao gồm fillOpacity, shared (toolTip)…

Nguồn: Đoạn mã JavaScript để tạo biểu đồ/đồ thị trình bày dữ liệu theo kiểu xếp chồng với tỷ lệ 100%