Code tạo biểu đồ/đồ thị kim tự tháp

Bạn có thể dùng JavaScript để tạo biểu đồ kim tự tháp. Dưới đây là hướng dẫn kèm code mẫu JavaScript tạo biểu đồ kim tự tháp.

JavaScript Pyramid Chart trên CanvasJS thường được dùng để hiện dữ liệu có tính chất phân cấp, biểu thị dữ liệu theo thứ tự lũy tiến. Bạn có thể hình dung biểu đồ kim tự tháp là hình thức đảo ngược của biểu đồ dạng phễu nhưng không có phần cổ và thường được dùng để hiện tỷ lệ từng thành phần trong tổng số.

Biểu đồ kim tự tháp được tạo bằng JavaScript trên CanvasJS có tính tương tác, đáp ứng, tương thích chéo trình duyệt, hỗ trợ hoạt ảnh & xuất dưới được dưới dạng ảnh.

Ví dụ bên dưới minh hoạ một mẫu biểu đồ kim tự tháp được tạo bằng JavaScript cùng mã nguồn HTML cho bạn chỉnh sửa trong trình duyệt hoặc lưu về máy để chạy nội bộ.

Biểu đồ JavaScript được tạo bằng kim tự tháp

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	theme: "light1",
	title:{
		text: "Chuyển đổi doanh số phần mềm"
	},
	data: [{
		type: "pyramid",
		yValueFormatString: "#\"%\"",
		indexLabelFontColor: "black",
		indexLabelFontSize: 16,
		indexLabel: "{label} - {y}",
		//reversed: true, // Đảo ngược kim tự tháp
		dataPoints: [
			{ y: 100, label: "Truy cập web" },
			{ y: 65, label: "Truy cập trang tải" },
			{ y: 45, label: "Đã tải" },
			{ y: 32, label: "Quan tâm tới việc mua sản phẩm" },
			{ y: 5, label: "Đã mua" }
		]
	}]
});
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 chỉnh biểu đồ

Các nhãn data/index trong biểu đồ kim tự tháp có thể được đặt bên trong bằng cách thiết lập indexLabelPlacement sang inside. Bạn cũng có thể đảo ngược biểu đồ bằng thuộc tính reversed. Một số tùy biến khác bao gồm valueRepresents, exploded, color…

Thứ Năm, 30/03/2023 14:41

4,3 ★ 3 👨 211

Bài trước

Biểu đồ hình phễu có thể tùy chỉnh kích thước

Bài sau

Biểu đồ kim tự tháp với các nhãn chỉ mục/dữ liệu

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