Code JavaScript tạo biểu đồ/đồ thị dạng phễu
JavaScript Funnel Chart - Biểu đồ phễu được tạo bằng JavaScript trong thư viện CanvasJS thường dùng cho mục đích trình bày nhiều giai đoạn trong một quá trình. Về cơ bản, nó bao gồm hai phần: phần cao hơn là đầu (hay đế), phần thấp hơn là cổ. Chúng thường được dùng để minh họa quá trình bán hàng.
Dạng biểu đồ phễu trên CanvasJS có tính tương tác, đáp ứng, tương thích chéo nền tảng, hỗ trợ hiệu ứng & xuất dưới dạng ảnh.
Ví dụ bên dưới minh họa một mẫu biểu đồ JavaScript dạng phễu. Bạn sẽ có phần mã nguồn chi tiết ở bên dưới để chỉnh sửa như ý muốn.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", //"light1", "dark1", "dark2"
title:{
text: "Phân tích bán hàng - Tháng 6, 2016"
},
data: [{
type: "funnel",
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
toolTipContent: "<b>{label}</b>: {y} <b>({percentage}%)</b>",
indexLabel: "{label} ({percentage}%)",
dataPoints: [
{ y: 1400, label: "Khách hàng tiềm năng" },
{ y: 1212, label: "Giao tiếp ban đầu" },
{ y: 1080, label: "Đánh giá khách hàng" },
{ y: 665, label: "Đàm phán" },
{ y: 578, label: "Nhận đơn hàng" },
{ y: 549, label: "Thanh toá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 chỉnh biểu đồ/đồ thị
Bạn có thể thay đổi một số thuộc tính trong code JavaScript để tạo biểu đồ/đồ thị phễu như ý muốn:
neckWidth
&neckHeight
: Độ cao và rộng của phần cổ phễu.valueRepresents
: Đại diện giá trịcolor
: Màu sắcindexLabelPlacement
: Đặt nhãn chỉ mụcfillOpacity
: Độ mờ khi điền thông tin- ...
261
Bạn nên đọc
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Cách chèn emoji vào ảnh trên iPhone cực đơn giản
Hôm qua -
11 thủ thuật mở Local Group Policy Editor trên Windows
Hôm qua -
Reset rank Liên Quân mùa 27
2 ngày -
Công thức Minecraft để chế tạo đồ cơ bản, thức ăn, công cụ dụng cụ, đồ bảo hộ, len, màu nhuộm
Hôm qua 1 -
C++ Editor Online
Hôm qua -
Thủ thuật gỡ bỏ Microsoft Edge trên Windows 10
Hôm qua -
200 biệt danh cho người yêu bằng tiếng Anh hay và ngọt ngào
2 ngày -
Hướng dẫn cách kẻ chéo ô trong Excel
2 ngày -
Cách sửa lỗi không tải được file lên Google Drive
Hôm qua -
Lực ma sát là gì? Có mấy loại lực ma sát?
2 ngày 1