Code JavaScript tạo mẫu biểu đồ chứa trục logarit

Trục logarit rất hữu ích khi minh họa dữ liệu khoa học hoặc toán học. Thư viện CanvasJS hỗ trợ thang đo logarit với cơ số khác nhau ở cả hai trục. Bạn có thể dùng thang logarit với tất cả các kiểu biểu đồ hỗ trợ trục bao gồm đường thẳng, theo vùng, cột, thanh, spline…

Ví dụ bên dưới hiện biểu đồ đường thẳng với trục tuyến tính và logarit. Nó cũng bao gồm code nguồn HTML/JavaScript mà bạn có thể chỉnh sửa trong trình duyệt hoặc lưu để chạy nội bộ.

Code mẫu biểu đồ JavaScript

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	zoomEnabled: true,
	theme: "dark2",
	title: {
		text: "Tăng trưởng người dùng Internet trên thế giới"
	},
	axisX: {
		title: "Năm",
		valueFormatString: "####",
		interval: 2
	},
	axisY: {
		logarithmic: true, //đổi sang false
		title: "Người dùng Internet",
		titleFontColor: "#6D78AD",
		lineColor: "#6D78AD",
		gridThickness: 0,
		lineThickness: 1,
		labelFormatter: addSymbols
	},
	axisY2: {
		title: "Người dùng Internet",
		titleFontColor: "#51CDA0",
		logarithmic: false, //đổi nó sang true
		lineColor: "#51CDA0",
		gridThickness: 0,
		lineThickness: 1,
		labelFormatter: addSymbols
	},
	legend: {
		verticalAlign: "top",
		fontSize: 16,
		dockInsidePlotArea: true
	},
	data: [{
		type: "line",
		xValueFormatString: "####",
		showInLegend: true,
		name: "Log Scale",
		dataPoints: [
			{ x: 1994, y: 25437639 },
			{ x: 1995, y: 44866595 },
			{ x: 1996, y: 77583866 },
			{ x: 1997, y: 120992212 },
			{ x: 1998, y: 188507628 },
			{ x: 1999, y: 281537652 },
			{ x: 2000, y: 414794957 },
			{ x: 2001, y: 502292245 },
			{ x: 2002, y: 665065014 },
			{ x: 2003, y: 781435983 },
			{ x: 2004, y: 913327771 },
			{ x: 2005, y: 1030101289 },
			{ x: 2006, y: 1162916818 },
			{ x: 2007, y: 1373226988 },
			{ x: 2008, y: 1575067520 },
			{ x: 2009, y: 1766403814 },
			{ x: 2010, y: 2023202974 },
			{ x: 2011, y: 2231957359 },
			{ x: 2012, y: 2494736248 },
			{ x: 2013, y: 2728428107 },
			{ x: 2014, y: 2956385569 },
			{ x: 2015, y: 3185996155 },
			{ x: 2016, y: 3424971237 }
		]
	},
	{
		type: "line",
		xValueFormatString: "####",
		axisYType: "secondary",
		showInLegend: true,
		name: "Linear Scale",
		dataPoints: [
			{ x: 1994, y: 25437639 },
			{ x: 1995, y: 44866595 },
			{ x: 1996, y: 77583866 },
			{ x: 1997, y: 120992212 },
			{ x: 1998, y: 188507628 },
			{ x: 1999, y: 281537652 },
			{ x: 2000, y: 414794957 },
			{ x: 2001, y: 502292245 },
			{ x: 2002, y: 665065014 },
			{ x: 2003, y: 781435983 },
			{ x: 2004, y: 913327771 },
			{ x: 2005, y: 1030101289 },
			{ x: 2006, y: 1162916818 },
			{ x: 2007, y: 1373226988 },
			{ x: 2008, y: 1575067520 },
			{ x: 2009, y: 1766403814 },
			{ x: 2010, y: 2023202974 },
			{ x: 2011, y: 2231957359 },
			{ x: 2012, y: 2494736248 },
			{ x: 2013, y: 2728428107 },
			{ x: 2014, y: 2956385569 },
			{ x: 2015, y: 3185996155 },
			{ x: 2016, y: 3424971237 }
		]
	}]
});
chart.render();

function addSymbols(e) {
	var suffixes = ["", "K", "M", "B", "T"];

	var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0);
	if(order > suffixes.length - 1)
		order = suffixes.length - 1;

	var suffix = suffixes[order];
	return CanvasJS.formatNumber(e.value / Math.pow(1000, order), "#,##0.##") + suffix;
}

}
</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ể tạo trục logarit bằng cách thiết lập thuộc tính logarit trong trục x hoặc y là true. Bạn cũng có thể chọn logarithmBase. Ngoài ra, bạn có thể tránh tỷ lệ trục bắt đầu từ 0 bằng cách sử dụng includeZero.

Thứ Năm, 29/12/2022 15:36

5 ★ 1 👨 145

Bài trước

Biểu đồ với trục thứ hai

Bài sau

Biểu đồ/đồ thị từ dữ liệu JSON bằng AJAX

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