Code mẫu JavaScript tạo biểu đồ đáp ứng
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ộ.
<!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ắcanimationEnabled
- Cho phép hoạt ảnhTheme
- Hình nềnSubtitles
- 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.
Bạn nên đọc
-
Code mẫu biểu đồ JavaScript có chú thích tùy biến
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code mẫu JavaScript tạo biểu đồ có ngắt trục/tỷ lệ
-
Code mẫu JavaScript tạo biểu đồ & đồ thị Drilldown
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code JavaScript tạo mẫu biểu đồ với crosshair
Có thể bạn quan tâm
-
Code JavaScript tạo biểu đồ & đồ thị sai số
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo mẫu biểu đồ/đồ thị box & whisker với màu tùy chỉnh
-
Code JavaScript tạo biểu đồ/đồ thị phân tán/điểm
-
Code biểu đồ/đồ thị thanh kết hợp sai số
-
Code JavaScript tạo biểu đồ thu phóng với tính năng Zoom & Pan