Code mẫu JavaScript tạo biểu đồ đáp ứng

Kandy Kandy

Biểu đồ JavaScript đáp ứng thay đổi theo kích thước màn hình khác nhau, bao gồm máy tính bảng, desktop & điện thoại. Toàn bộ biểu đồ đều có thể tương thích chéo và có hiệu suất tốt hơn gấp 10 lần.

Ví dụ bên dưới hiện biểu đồ cột mà bạn có thể chỉnh lại kích thước để kiểm tra khả năng đáp ứng của nó. Nó cũng chứa mã nguồn HTML/JavaScript mà bạn có thể chỉnh sửa trong trình duyệt hoặc lưu về máy để chạy nội bộ.

Biểu đồ JavaScript đáp ứng theo màn hình

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2", // bạn có thể thay bằng "light1", "light2", "dark1", "dark2"
	title: {
		text: "Tốc độ tăng trưởng GDP - 2022"
	},
	axisY: {
		title: "Tốc độ tăng trưởng (%)",
		suffix: "%"
	},
	axisX: {
		title: "Quốc gia"
	},
	data: [{
		type: "column",
		yValueFormatString: "#,##0.0#\"%\"",
		dataPoints: [
			{ label: "Ấn Độ", y: 7.1 },	
			{ label: "Trung Quốc", y: 6.70 },	
			{ label: "Indonesia", y: 5.00 },
			{ label: "Úc", y: 2.50 },	
			{ label: "Mexico", y: 2.30 },
			{ label: "Vương quốc Anh", y: 1.80 },
			{ label: "Mỹ", y: 1.60 },
			{ label: "Nhật Bản", y: 1.60 }
			
		]
	}]
});
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

Tùy chỉnh bản đồ

Bạn có thể dễ dàng thay đổi kiểu của biểu đồ bằng thuộc tính type. Một số tùy biến khác bao gồm:

Color - Màu sắc
animationEnabled - Cho phép hoạt ảnh
Theme - Hình nền
Subtitles - Phụ đề
...

Như bạn thấy cách tạo biểu đồ đáp ứng bằng JavaScript không quá khó. Với JavaScript, bạn còn có thể tạo thêm rất nhiều kiểu biểu đồ/đồ thị khác dễ dàng. Vì thế, đừng ngại thử những biểu đồ/đồ thị mới lạ khi đang lập trình bằng ngôn ngữ này.

Hi vọng bài viết hữu ích và chúc các bạn tạo thành công mẫu biểu đồ thay đổi theo kích thước màn hình bằng JavaScript.

Thứ Ba, 10/01/2023 13:48

3 ★ 1 👨 375

#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!