Code JavaScript tạo biểu đồ hình phễu có thể tùy chỉnh kích thước
Bạn có thể dễ dàng thay đổi chiều cao và rộng của cổ phễu trong biểu đồ này. Nếu thay đổi chiều cao và rộng sang 0 trong biểu đồ hình phễu sẽ khiến nó trở thành biểu đồ kim tự tháp.
Ví dụ bên dưới minh họa một mẫu biểu đồ hình phễu được tạo bằng JavaScript, có thể tùy biến chiều cao và rộng của phần cổ. Bài viết cũng chứa mã nguồn 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ộ.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Phân tích tuyển dụng - 7/2016"
	},
	data: [{
		type: "funnel",
		indexLabel: "{label} - {y}",
		toolTipContent: "<b>{label}</b>: {y} <b>({percentage}%)</b>",
		neckWidth: 20,
		neckHeight: 0,
		valueRepresents: "area",
		dataPoints: [
			{ y: 3871, label: "Ứng tuyển" },
			{ y: 2496, label: "Đã sàng lọc" },
			{ y: 1398, label: "Đủ điều kiện" },
			{ y: 1118, label: "Đã phỏng vấn" },
			{ y: 201, label: "Thêm ưu đãi" },
			{ y: 151, label: "Đã tuyển" }
		]
	}]
});
calculatePercentage();
chart.render();
function calculatePercentage() {
	var dataPoint = chart.options.data[0].dataPoints;
	var total = dataPoint[0].y;
	for(var i = 0; i < dataPoint.length; i++) {
		if(i == 0) {
			chart.options.data[0].dataPoints[i].percentage = 100;
		} else {
			chart.options.data[0].dataPoints[i].percentage = ((dataPoint[i].y / total) * 100).toFixed(2);
		}
	}
}
}
</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 đồ
Chiều rộng và cao của phần thấp hơn trong biểu đồ hình phễu, ví dụ, cổ có thể được chỉnh sửa bằng thuộc tính neckHeight và neckWidth có sẵn ở cấp chuỗi dữ liệu. Bạn cũng có thể đảo ngược phễu bằng thuộc tính reversed. Những lựa chọn tùy chỉnh thường được dùng khác là legend, valueRepresents…
Bạn nên đọc
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:

 JavaScript
 JavaScript Cũ vẫn chất
-   PING là gì? Test PING như thế nào?Hôm qua
-   Code Tiểu Yêu Tầm Đạo mới nhấtHôm qua
-   Cách ẩn, hiện ghi chú trong bảng trên ExcelHôm qua
-   Cách sửa lỗi không thấy bộ điều hợp mạng trên Windows 10Hôm qua
-   Các cách làm, tùy chỉnh trong bài sẽ giúp tăng tốc Windows 10 của bạn "nhanh như gió"Hôm qua 6
-   Cách sao chép hoặc tạo bản sao toàn bộ trang tính trong Google SheetsHôm qua
-   Cách dùng Terabox lưu trữ với 1TB miễn phíHôm qua 5
-   Cách đặt độ phân giải tùy chỉnh trong OBSHôm qua
-   Hàm COUNTIFS, cách dùng hàm đếm ô theo nhiều điều kiện trong ExcelHôm qua
-   Cách tắt kiểm tra chính tả trong WordHôm qua 1
 Học IT
 Học IT  
  
  
  
  
  
  
  Công nghệ
 Công nghệ  Nền tảng Web
 Nền tảng Web  Microsoft Word 2013
 Microsoft Word 2013  Microsoft Word 2007
 Microsoft Word 2007  Microsoft Excel 2019
 Microsoft Excel 2019  Microsoft Excel 2016
 Microsoft Excel 2016  Microsoft PowerPoint 2019
 Microsoft PowerPoint 2019  Microsoft PowerPoint 2016
 Microsoft PowerPoint 2016  Google Sheets
 Google Sheets  Học Python
 Học Python  HTML
 HTML  Lập trình Scratch
 Lập trình Scratch  CSS và CSS3
 CSS và CSS3  Lập trình C
 Lập trình C  Lập trình C++
 Lập trình C++  Lập trình C#
 Lập trình C#  Học PHP
 Học PHP  Bootstrap
 Bootstrap  SQL Server
 SQL Server  Unix/Linux
 Unix/Linux  Khoa học vui
 Khoa học vui  Khám phá khoa học
 Khám phá khoa học  Bí ẩn - Chuyện lạ
 Bí ẩn - Chuyện lạ  Sức khỏe
 Sức khỏe  Vũ trụ
 Vũ trụ  Khám phá thiên nhiên
 Khám phá thiên nhiên  Bảo vệ Môi trường
 Bảo vệ Môi trường  Phát minh Khoa học
 Phát minh Khoa học  Tết 2025
 Tết 2025  Video
 Video  Hướng dẫn
 Hướng dẫn  Công nghệ
 Công nghệ  Khoa học
 Khoa học  Ô tô, Xe máy
 Ô tô, Xe máy  Tổng hợp
 Tổng hợp