Code JavaScript tạo biểu đồ & đồ thị Pareto

Lê Văn Toàn

Pareto Chart hay biểu đồ Pareto là một kết hợp giữa đồ thị cột & đường. Các cột được đặt theo thứ tự giảm dần, còn biểu đồ đường đại diện cho tổng giá trị tích lũy.

Dạng biểu đồ/đồ thị này được dùng để highlight hầu hết các tình huống quan trọng. Nó cũng có tính tương tác, phản hồi và hỗ trợ hiệu ứng động & xuất ảnh.

Ví dụ bên dưới minh họa một mẫu biểu đồ Pareto được tạo bằng JavaScript. Bạn cũng sẽ có mã nguồn để chỉnh sửa trong trình duyệt hoặc lưu về máy để chạy nội bộ.

Mẫu biểu đồ Parato

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

var chart = new CanvasJS.Chart("chartContainer", {
	title:{
		text: "Chuỗi đồ ăn nhanh phổ biến"
	},
	axisY: {
		title: "Số địa điểm",
		lineColor: "#4F81BC",
		tickColor: "#4F81BC",
		labelFontColor: "#4F81BC"
	},
	axisY2: {
		title: "Phần trăm",
		suffix: "%",
		lineColor: "#C0504E",
		tickColor: "#C0504E",
		labelFontColor: "#C0504E"
	},
	data: [{
		type: "column",
		dataPoints: [
			{ label: "Subways", y: 44853 },
			{ label: "McDonald", y: 36525 },
			{ label: "Starbucks", y: 23768 },
			{ label: "KFC", y: 19420 },
			{ label: "Pizza Hut", y: 13528 },
			{ label: "Dunkin Donuts", y: 11906 }
		]
	}]
});
chart.render();
createPareto();	

function createPareto(){
	var dps = [];
	var yValue, yTotal = 0, yPercent = 0;

	for(var i = 0; i < chart.data[0].dataPoints.length; i++)
		yTotal += chart.data[0].dataPoints[i].y;

	for(var i = 0; i < chart.data[0].dataPoints.length; i++){
		yValue = chart.data[0].dataPoints[i].y;
		yPercent += (yValue / yTotal * 100);
		dps.push({label: chart.data[0].dataPoints[i].label, y: yPercent});
	}
	
	chart.addTo("data",{type:"line", yValueFormatString: "0.##\"%\"", dataPoints: dps});
	chart.data[1].set("axisYType", "secondary", false);
	chart.axisY[0].set("maximum", yTotal);
	chart.axisY2[0].set("maximum", 100);
}

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>

Nguồn: CanvasJS

Tinh chỉnh biểu đồ

Bạn có thể thay đổi color của cột hoặc đường để làm nổi bật nó. Một số lựa chọn chỉnh sửa phổ biến khác bao gồm dataPointWidth - chiều rộng điểm dữ liệu, markerType - kiểu đánh dấu, markerColor - màu đánh dấu,…

Chủ Nhật, 21/05/2023 16:41

3 ★ 1 👨 297

#JavaScript