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

Kandy parfume

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ứ Tư, 28/12/2022 10:13

3 ★ 1 👨 156

#JavaScript