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:


Cũ vẫn chất
-
Cách thêm nhiều emoji react Story Facebook
Hôm qua 1 -
Tải Wuthering Waves, Wuthering Waves APK
Hôm qua -
5 code trái tim đập của thủ khoa Lý có tên, chèn ảnh
Hôm qua 14 -
Thơ về con, thơ về con trai/con gái yêu của mẹ hay và cảm động nhất
Hôm qua -
Cách vào Safe Mode Windows 10 khi khởi động
Hôm qua -
Tổng hợp tất cả các lệnh AutoCAD
Hôm qua -
Stt năng lượng tích cực truyền cảm hứng và sức mạnh cho bạn
Hôm qua -
Code Untitled Boxing Game mới nhất và cách nhập code
Hôm qua -
Cách mở khóa sổ điểm trên VnEdu
Hôm qua -
Bài tập C++ có giải (code mẫu) về biến, kiểu dữ liệu và toán tử
Hôm qua 1