Code JavaScript tạo biểu đồ/đồ thị phân tán/điểm

Biểu đồ phân tán trình bày dữ liệu dưới dạng một chuỗi các điểm với các trục tọa độ được xác định bởi giá trị x và y của điểm dữ liệu. Dạng biểu đồ này còn được gọi là biểu đồ điểm. Nó rất hữu ích trong trường hợp bạn muốn tìm hiểu mật độ điểm dữ liệu được phân tán như thế nào khi tọa độ trục x và y thay đổi.

Với biểu đồ này, bạn có thể tương tác, thêm hiệu ứng động, thu phóng dữ liệu, xoay & xuất file dưới dạng ảnh. Dưới đây là ví dụ minh họa biểu đồ phân tán/điểm được tạo bằng JavaScript cùng với mã nguồn HTML 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 đồ phân tán đượ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: "Giá bất động sản"
	},
	axisX: {
		title:"Diện tích (sq. ft)",
		minimum: 790,
		maximum: 2260
	},
	axisY:{
		title: "Giá (USD)",
		valueFormatString: "$#,##0k"
	},
	data: [{
		type: "scatter",
		toolTipContent: "<b>Area: </b>{x} sq.ft<br/><b>Price: </b>${y}k",
		dataPoints: [
			{ x: 800, y: 350 },
			{ x: 900, y: 450 },
			{ x: 850, y: 450 },
			{ x: 1250, y: 700 },
			{ x: 1100, y: 650 },
			{ x: 1350, y: 850 },
			{ x: 1200, y: 900 },
			{ x: 1410, y: 1250 },
			{ x: 1250, y: 1100 },
			{ x: 1400, y: 1150 },
			{ x: 1500, y: 1050 },
			{ x: 1330, y: 1120 },
			{ x: 1580, y: 1220 },
			{ x: 1620, y: 1400 },
			{ x: 1250, y: 1450 },
			{ x: 1350, y: 1600 },
			{ x: 1650, y: 1300 },
			{ x: 1700, y: 1620 },
			{ x: 1750, y: 1700 },
			{ x: 1830, y: 1800 },
			{ x: 1900, y: 2000 },
			{ x: 2050, y: 2200 },
			{ x: 2150, y: 1960 },
			{ x: 2250, y: 1990 }
		]
	}]
});
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 biến biểu đồ

Giống như các mẫu biểu đồ khác trong mục này, bạn có thể thay đổi các thuộc tính như ý muốn để có kết quả phù hợp với nhu cầu. Ví dụ:

  • markerType: Kiểu đánh dấu
  • markerSize: Kích thước đánh dấu
  • Color: Màu sắc
  • markerBorderColor: Màu sắc đường viền của đánh dấu
  • fillOpacity: Độ mờ khi điền dữ liệu
  • Và nhiều hơn thế nữa.
Thứ Bảy, 29/04/2023 16:11
31 👨 243
0 Bình luận
Sắp xếp theo
    ❖ JavaScript