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
![❖](https://st.quantrimang.com/photos/avatars/default.png)
![❖](https://st.quantrimang.com/photos/image/icon/javascript-64-size-24x24-znd.png)
Cũ vẫn chất
-
Những status cảm động níu kéo người yêu cũ
2 ngày -
Hình nền mở khóa điện thoại hài hước, hình nền mở khóa troll bá đạo
Hôm qua -
Reset rank Liên Quân mùa 27
2 ngày -
Quay màn hình máy tính bằng OBS Studio, cách ghi màn hình laptop trên OBS
2 ngày -
Cách sửa lỗi không tải được file lên Google Drive
Hôm qua -
200 biệt danh cho người yêu bằng tiếng Anh hay và ngọt ngào
2 ngày -
Phần mở rộng file là gì?
Hôm qua -
Cách xem phiên bản di động của một trang web bất kỳ trên máy tính
Hôm qua -
Hướng dẫn thiết lập và quản lý FTP Server trên Windows 10
2 ngày -
Stt cho những đêm tâm trạng không ngủ được
Hôm qua