Code JavaScript tạo biểu đồ dạng phễu đảo ngược

Kandy parfume

Bạn có thể xoay biểu đồ dạng phễu úp xuống dưới bằng cách thiết lập thuộc tính đảo ngược (reversed) thành true. Bạn cũng có thể kiểm soát chiều cao và rộng của phần cổ phễu. Giống như biểu đồ hình tròn, các chú thích sẽ hiện cho tất cả điểm dữ liệu thay vì chuỗi dữ liệu.

Ví dụ bên dưới minh họa một biểu đồ dạng phễu đảo ngược được tạo bằng JavaScript kèm mã nguồn 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 dạng hình phễu ngược

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title:{
		text: "Bán hàng qua quảng cáo"
	},
	data: [{
		type: "funnel",
		reversed: true,
		showInLegend: true,
		legendText: "{label}",
		indexLabel: "{label} - {y}",
		toolTipContent: "<b>{label}</b>: {y} <b>({percentage}%)</b>",
		indexLabelFontColor: "black",
		dataPoints: [
			{ y: 3500, label: "Số lần hiển thị" },
			{ y: 2130, label: "Đã click" },
			{ y: 1950, label: "Tải miễn phí" },
			{ y: 500, label: "Mua hàng" },
			{ y: 300, label: "Gia hạ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 đồ

Biểu đồ dạng phễu có thể được đảo ngược bằng cách thiết lập true cho thuộc tính reversed có sẵn ở cấp chuỗi dữ liệu. Ngoài ra, bạn có thể tinh chỉnh thêm những lựa chọn tùy biến khác như showInLegend, exploded, explodeOnClick, click…

Thứ Ba, 28/03/2023 14:35

5 ★ 1 👨 172

#JavaScript