Học CNTT

Code mẫu JavaScript tạo biểu đồ cột nhiều chuỗi dữ liệu

Biểu đồ cột đa chuỗi dữ liệu giúp trực quan hóa các nhóm dữ liệu theo phạm vi liên quan, chẳng hạn như giá trị cao và thấp. Những biểu đồ đa chuỗi dữ liệu rất hữu ích khi so sánh sự khác biệt giữa nhiều chuỗi dữ liệu.

Ví dụ bên dưới minh họa một biểu đồ cột đa dãy được tạo bằng JavaScript. Bạn sẽ có cả code nguồn để chỉnh sửa như ý muốn.

JavaScript tạo biểu đồ cột đa chuỗi dữ liệu

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title:{
		text: "So sánh nhiệt độ giữa hai thành phố"
	},
	axisX: {
		valueFormatString: "MMM"
	},
	axisY: {
		suffix: " °C"
	},
	toolTip: {
		shared: true
	},
	legend: {
		cursor: "pointer",
		itemclick: toggleDataSeries
	},
	data: [{
		type: "rangeColumn",
		name: "City 1",
		showInLegend: true,
		yValueFormatString: "#0.## °C",
		xValueFormatString: "MMM, YYYY",
		dataPoints: [   
			{ x: new Date(2016, 00), y: [08, 20] },
			{ x: new Date(2016, 01), y: [10, 24] },
			{ x: new Date(2016, 02), y: [16, 29] },
			{ x: new Date(2016, 03), y: [21, 36] },
			{ x: new Date(2016, 04), y: [26, 39] },
			{ x: new Date(2016, 05), y: [22, 39] },
			{ x: new Date(2016, 06), y: [20, 35] },
			{ x: new Date(2016, 07), y: [20, 34] },
			{ x: new Date(2016, 08), y: [20, 34] },
			{ x: new Date(2016, 09), y: [19, 33] },
			{ x: new Date(2016, 10), y: [13, 28] },
			{ x: new Date(2016, 11), y: [09, 23] }
		]
		},
		{
			type: "rangeColumn",
			name: "City 2",
			showInLegend: true,
			yValueFormatString: "#0.## °C",
			xValueFormatString: "MMM, YYYY",
			dataPoints: [   
				{ x: new Date(2016, 00), y: [16, 28] },
				{ x: new Date(2016, 01), y: [18, 31] },
				{ x: new Date(2016, 02), y: [20, 33] },
				{ x: new Date(2016, 03), y: [22, 34] },
				{ x: new Date(2016, 04), y: [22, 33] },
				{ x: new Date(2016, 05), y: [20, 29] },
				{ x: new Date(2016, 06), y: [20, 28] },
				{ x: new Date(2016, 07), y: [20, 28] },
				{ x: new Date(2016, 08), y: [20, 28] },
				{ x: new Date(2016, 09), y: [20, 28] },
				{ x: new Date(2016, 10), y: [14, 27] },
				{ x: new Date(2016, 11), y: [11, 26] }
			]
	}]
});
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: CanvasJS

Tùy chỉnh biểu đồ

Tương tự như các biểu đồ được tạo bằng JavaScript, bạn có thể chỉnh sửa các thuộc tính liên quan để đạt được kết quả như ý muốn. Ví dụ:

  • showInLegend: Hiện chú giải
  • verticalAlign: Đặt chú giải theo chiều dọc
  • horizontalAlign: Đặt chú giải theo chiều ngang
  • Shared(toolTip): Chia sẻ tooltip
  • color: Màu sắc
  • legendText: Kiểu text chú giải
  • fillOpacity: Độ mờ
  • Và nhiều hơn thế nữa.
Thứ Tư, 01/03/2023 14:52
5 ★ 1 👨 237
#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