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

Kandy parfume

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

Ví dụ bên dưới minh họa một mẫu biểu đồ xếp chồng thanh 100% được tạo bằng JavaScript kèm mã nguồn HTML mà 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ộ.

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 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 chiều rộng của thanh bằng dataPointWidth hoặc màu sắc của nó bằng color. Bạn cũng có thể hiện chú giải bằng thuộc tính showInLegend. Một số lựa chọn tùy chỉnh khác bao gồm fillOpacity, shared (toolTip)…

Thứ Tư, 08/03/2023 14:48

5 ★ 1 👨 248

#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!