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

Biểu đồ nhiều trục hữu ích khi các giá trị bên trong nó thay đổi nhiều từ một chuỗi dữ liệu sang chuỗi khác. Bạn có thể đặt một hoặc nhiều chuỗi dữ liệu hơn theo trục chính, trong khi dùng trục phụ cho dữ liệu khác.

Code mẫu biểu đồ Multiple Axis được tạo bằng JavaScript giúp nó dễ dàng so sánh các chuỗi với phạm vi khác nhau trong cùng một biểu đồ thay vì lật qua lại giữa hai biểu đồ. Ví dụ này cho bạn cả mã nguồn để chỉnh sửa trong trình duyệt hoặc lưu về máy để chạy nội bộ.

Code JavaScript tạo mẫu biểu đồ

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

var chart = new CanvasJS.Chart("chartContainer", {
	exportEnabled: true,
	animationEnabled: true,
	title:{
		text: "Số lượng ô tô đã bán ở các vùng khác nhau"
	},
	subtitles: [{
		text: "Click từng cột trong biểu đồ để xem số liệu"
	}], 
	axisX: {
		title: "States"
	},
	axisY: {
		title: "Oil Filter - Units",
		titleFontColor: "#4F81BC",
		lineColor: "#4F81BC",
		labelFontColor: "#4F81BC",
		tickColor: "#4F81BC",
		includeZero: true
	},
	axisY2: {
		title: "Clutch - Units",
		titleFontColor: "#C0504E",
		lineColor: "#C0504E",
		labelFontColor: "#C0504E",
		tickColor: "#C0504E",
		includeZero: true
	},
	toolTip: {
		shared: true
	},
	legend: {
		cursor: "pointer",
		itemclick: toggleDataSeries
	},
	data: [{
		type: "column",
		name: "Oil Filter",
		showInLegend: true,      
		yValueFormatString: "#,##0.# Units",
		dataPoints: [
			{ label: "New Jersey",  y: 19034.5 },
			{ label: "Texas", y: 20015 },
			{ label: "Oregon", y: 25342 },
			{ label: "Montana",  y: 20088 },
			{ label: "Massachusetts",  y: 28234 }
		]
	},
	{
		type: "column",
		name: "Clutch",
		axisYType: "secondary",
		showInLegend: true,
		yValueFormatString: "#,##0.# Units",
		dataPoints: [
			{ label: "New Jersey", y: 210.5 },
			{ label: "Texas", y: 135 },
			{ label: "Oregon", y: 425 },
			{ label: "Montana", y: 130 },
			{ label: "Massachusetts", y: 528 }
		]
	}]
});
chart.render();

function toggleDataSeries(e) {
	if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	} else {
		e.dataSeries.visible = true;
	}
	e.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: CanvaJS

Tùy biến biểu đồ

Bạn có thể đặt kiểu trục muốn dùng bằng axisXType hoặc axisYType. Bạn cũng có thể tạo biểu đồ với nhiều trục trên cùng một phía và gắn chuỗi dữ liệu khác nhau vào nó bằng axisXIndex hoặc axisYIndex.

Thứ Hai, 02/01/2023 10:38

3 ★ 1 👨 190

Bài trước

Biểu đồ với trục đảo ngược

Bài sau

Biểu đồ chứa trục logarit

#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!