Code JavaScript tạo biểu đồ & đồ thị bong bóng

Biểu đồ bong bóng được tạo bằng JavaScript cho phép bạn minh họa dữ liệu theo 3 chiều. Nó rất giống biểu đồ phân tán, ngoại trừ việc kích thước của bong bóng đại diện cho tham số/khía cạnh khác. Ngoài 3 tham số được yêu cầu (x, y, z), x & y xác định vị trí của bong bóng trên trục X & Y, còn Z xác định kích thước của nó. Một trong số điểm nổi bật của biểu đồ bong bóng là giá trị Z của điểm dữ liệu tỷ lệ thuận với diện tích bong bóng, chứ không phải đường kính hay bán kính.

Ví dụ bên dưới hiện biểu đồ bong bóng được tạo bằng JavaScript cùng với 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 đồ bong bóng bằng JavaScript

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Tỷ lệ sinh so với tuổi thọ ở các quốc gia khác nhau - 2015"
	},
	axisX: {
		title:"Tuổi thọ (theo năm)"
	},
	axisY: {
		title:"Tỷ lệ sinh",
		includeZero: true
	},
	legend:{
		horizontalAlign: "left"
	},
	data: [{
		type: "bubble",
		showInLegend: true,
		legendText: "Kích thước của bong bóng đại diện cho dân số theo hàng triệu",
		legendMarkerType: "circle",
		legendMarkerColor: "grey",
		toolTipContent: "<b>{name}</b><br/>Tuổi thọ: {x} yrs<br/> Tỷ lệ sinh: {y}<br/> Dân số: {z}mn",
		dataPoints: [
			//{ x: 68.3, y: 2.4, z: 1309.05 , name: "Ấn Độ"},
			//{ x: 76, y: 1.57, z:1371.22, name: "Trung Quốc"},
			{ x: 78.7, y: 1.84, z:320.896, name: "Mỹ" },
			{ x: 69.1, y: 2.44, z: 258.162, name: "Indonesia" },
			{ x: 74.7, y: 1.78, z: 225.962, name: "Brazil" },
			{ x: 76.9, y: 2.21, z: 125.890, name: "Mexico" },
			{ x: 53, y: 5.59, z: 181.181, name: "Nigeria" },
			{ x: 70.9, y: 1.75, z: 144.096, name: "Nga" },
			{ x: 83.8, y: 1.46, z:127.141, name: "Nhật Bản" },
			{ x: 82.5, y: 1.83, z:23.789, name: "Úc" },
			{ x: 71.3, y: 3.31, z: 93.778, name: "Ai Cập" },
			{ x: 81.6, y: 1.81, z:65.128, name: "Vương quốc Anh" },
			{ x: 62.1, y: 4.26, z: 47.236, name: "Kenya" },
			{ x: 69.6, y: 4.51, z: 36.115, name: "I rắc" },
			{ x: 60.7, y: 4.65, z: 33.736, name: "Afganistan" },
			{ x: 52.7, y: 6, z: 27.859, name: "Angola" },
			{ x: 68.4, y: 2.94, z: 101.716, name: "Philippine" },
			{ x: 70, y: 2.17, z: 28.656, name: "Nepal" },
			{ x: 71.2, y: 1.51, z: 45.154, name: "Ukraina" },
			{ x: 83.4, y: 1.62, z: 46.447, name: "Tây Ban Nha" },
			{ x: 64.6, y: 4.28, z: 99.873, name: "Ethiopia" },
			{ x: 74.6, y: 1.5, z: 68.65, name: "Thái Lan" },
			{ x: 74.2, y: 1.88, z: 48.228, name: "Colombia" },
			{ x: 74.44, y: 2.34, z: 31.155, name: "Venezuela" },
			{ x: 57.4, y: 2.34, z: 55, name: "Nam Phi" },
			{ x: 59.2, y: 3.86, z: 15.77, name: "Zimbabwe" },
			{ x: 55.9, y: 4.63, z: 22.834, name: "Cameroon"}
		]
	}]
});
chart.render();

}
</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