Học CNTT

Code JavaScript tạo biểu đồ bong bóng với điểm đánh dấu tùy biến

Bạn có thể trình bày biểu đồ bong bóng bằng định dạng mặc định hoặc bất kỳ kiểu đánh dấu khác như hình tam giác, hình vuông… Tính năng này có thể hữu ích trong trường hợp hình bong bóng không còn thích hợp để minh họa các điểm dữ liệu.

Ví dụ bên dưới trình bày biểu đồ bong bóng với kiểu đánh dấu được tùy chỉnh cùng mã nguồn JavaScript mà bạn có thể chỉnh sửa trong trình duyệt hoặc lưu về thiết bị để chạy nội bộ.

Biểu đồ bong bóng JavaScript

<!DOCTYPE HTML>
<html>
<head>  
<script type="text/javascript">
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Đường sắt so với diện tích đất và dân số"
	},
	axisX: {
		title:"Diện tích đất (Triệu ki lô mét vuông)",
		maximum: 17,
		minimum: -.1
	},
	axisY:{
		title: "Đường sắt (km)",
		gridColor: "lightgrey",
		tickColor: "lightgrey",
		lineThickness: 0,
		valueFormatString:"#,##0 km,.",
		interval: 50000
	},
	data: [{        
		type: "bubble",
		markerType: "triangle",
		toolTipContent: "<b>{label}</b><br/><b>Diện tích đất:</b> {x}mn sq. km <br/><b>Đường sắt:</b> {y} km<br/> <b>Dân số:</b>{z}mn",
		dataPoints: [
			{ x: 9.14, y: 228513, z:309.34, label:"Mỹ" },
			{ x: 16.37, y: 85292, z:141.92, label:"Nga" },
			{ x: 9.327, y: 66239, z:1337, label:"Trung Quốc" },
			{ x: 9.09, y: 58345, z:34.12, label:"Canada" },
			{ x: 8.45, y: 29817, z:194.94, label:"Brazil" },
			{ x: 7.68, y: 8615, z:22.29, label:"Úc" },
			{ x: 2.97, y: 63974, z:1224.61, label:"Ấn Độ" },
			{ x: 2.73, y: 25023, z:40.41, label:"Argentina" },
			{ x: 1.94, y: 26704, z:113.42, label:"Mexico" },
			{ x: 1.21, y: 22051, z:49.99, label:"SA" },
			{ x: .547, y: 33608, z:65.07, label:"France" },
			{ x: .241, y: 31471, z:62.23, label:"Vương quốc Anh" },
			{ x: .348, y: 33708, z:81.77, label:"Đức" },
			{ x: .364, y: 20035, z:127.45, label:"Nhật Bản" },
			{ x: .995, y: 5195, z:81.12, label:"Ai Cập" },
			{ x: .743, y: 5352, z:17.11, label:"Chile" }
		]
	}]
});
chart.render();

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

Nguồn: CanvasJS

Tinh chỉnh biểu đồ

Giống như những biểu đồ bong bóng khác, bạn có thể thay đổi các thuộc tính để có kết quả như ý muốn. Ví dụ:

  • markerType: Đổi kiểu đánh dấu
  • markerSize: Thay đổi kích thước điểm đánh dấu
  • markerColor: Lựa chọn màu sắc điểm đánh dấu
  • markerBorderThickness: Độ dày đường viền đánh dấu
  • markerBorderColor: Màu sắc đường viền đánh dấu
Thứ Năm, 04/05/2023 12:10
4 ★ 2 👨 310
#JavaScript

Bạn nên đọc

Xác thực tài khoản!

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:

Số điện thoại chưa đúng định dạng!
Số điện thoại này đã được xác thực!
Bạn có thể dùng Sđt này đăng nhập tại đây!
Lỗi gửi SMS, liên hệ Admin
0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi
Biểu đồ JavaScript