Code JavaScript tạo biểu đồ đường với Zoom và Pan

Line Charts hay biểu đồ đường/tuyến giống như bất kỳ biểu đồ/đồ thị khác trong thư viện hỗ trợ thu phóng và xoay. Nó là một trong số các tính năng quan trọng nhất của biểu đồ, nhất là khi bạn cần xử lý một số lượng lớn dữ liệu. Bạn có thể thu phóng dọc theo X, Y hoặc cả hai trục.

Ví dụ bên dưới minh họa biểu đồ đường/tuyến có thể thu phóng và xoay. Bài viết cũng bao gồm mã nguồn 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 đồ được tạo bằng JavaScript

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	zoomEnabled: true,
	title:{
		text: "Thử Zoom và Pan" 
	},
	data: data  // Trình tạo ngẫu nhiên bên dưới
});
chart.render();

}

var limit = 1000;

var y = 0;
var data = [];
var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
	y += (Math.random() * 10 - 5);
	dataPoints.push({
		x: i - limit / 2,
		y: y                
	});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);               

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

Nguồn: CanvasJS

Tùy biến biểu đồ

Bạn có thể kích hoạt tính năng thu phóng và xoay bằng thuộc tính zoomEnabled. Bạn cũng có thể chọn zoomType để thu phóng dọc trục X, Y hoặc cả hai.

Một số lựa chọn tùy biến khác bao gồm:

Toolbar - Thanh công cụ
lineThickness - Độ dày của đường thẳng
lineDashType - Kiểu nét gạch
markerType - Kiểu đánh dấu
Và nhiều hơn thế nữa.

Như bạn thấy cách tạo biểu đồ đường hay dạng tuyến bằng JavaScript khá đơn giản. Bạn có thể chỉnh sửa các thuộc tính trong code mẫu ở trên để tùy chỉnh biểu đồ/đồ thị như ý muốn.

Hi vọng với code mẫu JavaScript tạo biểu đồ trên hữu ích. Chúc các bạn thực hiện thành công!

Thứ Bảy, 14/01/2023 11:28

5 ★ 1 👨 169

#JavaScript