Code mẫu JavaScript tạo biểu đồ/đồ thị với Zoom và Pan
Tiếp tục kho code mẫu JavaScript tạo biểu đồ đẹp mắt với tính năng thu phóng và xoay. Chúng rất tiện lợi và dễ sử dụng khi được tạo bằng JavaScript.
Zoom & Pan cho phép phân tích dữ liệu ở cấp độ vi mô và rất hữu ích khi biểu đồ chứa dữ liệu lớn trở nên khó đọc. Trong khi Zooming cho bạn thấy chi tiết dữ liệu bằng cách chọn một vùng cụ thể, Panning/Scrolling cho bạn điều hướng qua biểu đồ sau khi phóng to nó.
Zooming & Panning được hỗ trợ trên tất cả các kiểu biểu đồ với các trục bao gồm line, column, area, bar, candlestick… Ví dụ bên dưới hiện một mẫu đồ thị được tạo bởi JavaScript có tính năng xoay và thu phóng cùng mã nguồn cho bạn chỉnh sửa hoặc lưu để dùng cho trang web:

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2", // bạn có thể thử "light1", "light2", "dark1" hoặc "dark2"
animationEnabled: true,
zoomEnabled: true,
title: {
text: "Thử phóng to và xoay"
},
data: [{
type: "area",
dataPoints: []
}]
});
addDataPoints(1000);
chart.render();
function addDataPoints(noOfDps) {
var xVal = chart.options.data[0].dataPoints.length + 1, yVal = 100;
for(var i = 0; i < noOfDps; i++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
chart.options.data[0].dataPoints.push({x: xVal,y: yVal});
xVal++;
}
}
}
</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: Canvajs.com
Bạn có thể phóng to, thu nhỏ quanh trục X, Y hoặc cả hai bằng zoomType. Một số tùy biến khác bao gồm toolbar, color, fillOpacity, lineColor, lineThickness…
Bạn nên đọc
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:
Cũ vẫn chất
-

Cách xóa vĩnh viễn nhóm trên Messenger
2 ngày -

Cách đổi dấu phẩy thành dấu chấm trên Word
2 ngày -

Những câu nói hay về người 2 mặt, về lòng người khó đoán
2 ngày -

Cách cài đặt các codec HEVC miễn phí trên Windows 10 (cho video H.265)
2 ngày -

Cách ẩn tài khoản Instagram và ngăn người dùng khác tìm thấy bạn
2 ngày -

Xóa tận gốc các file "cứng đầu" nhất trên Windows
2 ngày -

Cách kiểm tra lịch sử trên máy tính để biết có ai đó đã truy cập và sử dụng máy tính của bạn?
2 ngày -

Tại sao nên thay đổi vị trí tải xuống mặc định trong Windows 11?
2 ngày -

Code Chiến Giới 4D Mobile mới nhất 2/2026
2 ngày 2 -

Hướng dẫn đổi code Untitled Boxing game
2 ngày
Học IT
Công nghệ
Microsoft Word 2013
Microsoft Word 2007
Microsoft Excel 2019
Microsoft Excel 2016
Microsoft PowerPoint 2019
Google Sheets
Lập trình Scratch
Bootstrap
Prompt
Ô tô, Xe máy