Học CNTT

Code mẫu JavaScript tạo biểu đồ nối hàm với trục thứ hai

Spline Chart hỗ trợ trục thứ hai hữu ích khi các giá trị trong biểu đồ có biến động lớn giữa các chuỗi dữ liệu. Ví dụ bên dưới trình bày một đồ thị về tốc độ, khoảng cách và thời gian bằng Spline Chart với trục thứ hai. Nó cũng chứa code 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ộ.

Code biểu đồ JavaScript Spline Chart

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Speed And Distance Time Graph"
	},
	toolTip: {
		shared: true
	},
	axisX: {
		title: "Time",
		suffix : " s"
	},
	axisY: {
		title: "Speed",
		titleFontColor: "#4F81BC",
		suffix : " m/s",
		lineColor: "#4F81BC",
		tickColor: "#4F81BC"
	},
	axisY2: {
		title: "Distance",
		titleFontColor: "#C0504E",
		suffix : " m",
		lineColor: "#C0504E",
		tickColor: "#C0504E"
	},
	data: [{
		type: "spline",
		name: "speed",
		xValueFormatString: "#### sec",
		yValueFormatString: "#,##0.00 m/s",
		dataPoints: [
			{ x: 0 , y: 0 },
			{ x: 11 , y: 8.2 },
			{ x: 47 , y: 41.7 },
			{ x: 56 , y: 16.7 },
			{ x: 120 , y: 31.3 },
			{ x: 131 , y: 18.2 },
			{ x: 171 , y: 31.3 },
			{ x: 189 , y: 61.1 },
			{ x: 221 , y: 40.6 },
			{ x: 232 , y: 18.2 },
			{ x: 249 , y: 35.3 },
			{ x: 253 , y: 12.5 },
			{ x: 264 , y: 16.4 },
			{ x: 280 , y: 37.5 },
			{ x: 303 , y: 24.3 },
			{ x: 346 , y: 23.3 },
			{ x: 376 , y: 11.3 },
			{ x: 388 , y: 8.3 },
			{ x: 430 , y: 1.9 },
			{ x: 451 , y: 4.8 }
		]
	},
	{
		type: "spline",  
		axisYType: "secondary",
		name: "distance covered",
		yValueFormatString: "#,##0.# m",
		dataPoints: [
			{ x: 0 , y: 0 },
			{ x: 11 , y: 90 },
			{ x: 47 , y: 1590 },
			{ x: 56 , y: 1740 },
			{ x: 120 , y: 3740 },
			{ x: 131 , y: 3940 },
			{ x: 171 , y: 5190 },
			{ x: 189 , y: 6290 },
			{ x: 221 , y: 7590 },
			{ x: 232 , y: 7790 },
			{ x: 249 , y: 8390 },
			{ x: 253 , y: 8440 },
			{ x: 264 , y: 8620 },
			{ x: 280 , y: 9220 },
			{ x: 303 , y: 9780 },
			{ x: 346 , y: 10780 },
			{ x: 376 , y: 11120 },
			{ x: 388 , y: 11220 },
			{ x: 430 , y: 11300 },
			{ x: 451 , y: 11400 }
		]
	}]
});
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 đồ

Bạn có thể tinh chỉnh biểu đồ nối hàm trên bằng cách thay đổi:

  • lineThickness - độ dày của đường thẳng
  • lineColor - màu sắc của đường thẳng
  • Color - màu sắc
  • markerType - kiểu đánh dấu
  • markerBorderColor - màu đường viền đánh dấu
Thứ Ba, 31/01/2023 17:11
3 ★ 3 👨 251
#JavaScript

Bạn nên đọc

Xác thực tài khoản!

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:

Số điện thoại chưa đúng định dạng!
Số điện thoại này đã được xác thực!
Bạn có thể dùng Sđt này đăng nhập tại đây!
Lỗi gửi SMS, liên hệ Admin
0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi
❖ JavaScript
Biểu đồ JavaScript