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

Kandy Kandy

Biểu đồ thanh đa chuỗi dữ liệu (Multi Series Bar Chart) được tạo bằng JavaScript hữu ích trong việc làm nổi bật sự khác biệt giữa hai hoặc nhiều tập hợp dữ liệu khác nhau. Các thanh được đặt cạnh nhau trong đồ thị/biểu đồ này. Thêm chú giải trong biểu đồ thanh này giúp người xem dễ đọc thông tin hơn.

Ví dụ bên dưới minh họa một mẫu biểu đồ thanh đa chuỗi dữ liệu được tạo bằng JavaScript đơn giản nhất. Bài viết cũng bao gồm mã nguồn cho bạn chỉnh sửa trong trình duyệt hoặc lưu về máy để chạy nội bộ.

Biểu đồ thanh nhiều chuỗi dữ liệu

<!DOCTYPE HTML>
<html>
<head>  
<script type="text/javascript">
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Huy chương Olympic mọi thời đại (tới Olympics 2016)"
	},
	axisY: {
		title: "Huy chương",
		includeZero: true
	},
	legend: {
		cursor:"pointer",
		itemclick : toggleDataSeries
	},
	toolTip: {
		shared: true,
		content: toolTipFormatter
	},
	data: [{
		type: "bar",
		showInLegend: true,
		name: "Vàng",
		color: "gold",
		dataPoints: [
			{ y: 243, label: "Ý" },
			{ y: 236, label: "Trung Quốc" },
			{ y: 243, label: "Pháp" },
			{ y: 273, label: "Anh" },
			{ y: 269, label: "Đức" },
			{ y: 196, label: "Nga" },
			{ y: 1118, label: "Mỹ" }
		]
	},
	{
		type: "bar",
		showInLegend: true,
		name: "Bạc",
		color: "silver",
		dataPoints: [
			{ y: 212, label: "Ý" },
			{ y: 186, label: "Trung Quốc" },
			{ y: 272, label: "Pháp" },
			{ y: 299, label: "Anh" },
			{ y: 270, label: "Đức" },
			{ y: 165, label: "Nga" },
			{ y: 896, label: "Mỹ" }
		]
	},
	{
		type: "bar",
		showInLegend: true,
		name: "Đồng",
		color: "#A57164",
		dataPoints: [
			{ y: 236, label: "Ý" },
			{ y: 172, label: "Trung Quốc" },
			{ y: 309, label: "Pháp" },
			{ y: 302, label: "Anh" },
			{ y: 285, label: "Đức" },
			{ y: 188, label: "Nga" },
			{ y: 788, label: "Mỹ" }
		]
	}]
});
chart.render();

function toolTipFormatter(e) {
	var str = "";
	var total = 0 ;
	var str3;
	var str2 ;
	for (var i = 0; i < e.entries.length; i++){
		var str1 = "<span style= \"color:"+e.entries[i].dataSeries.color + "\">" + e.entries[i].dataSeries.name + "</span>: <strong>"+  e.entries[i].dataPoint.y + "</strong> <br/>" ;
		total = e.entries[i].dataPoint.y + total;
		str = str.concat(str1);
	}
	str2 = "<strong>" + e.entries[0].dataPoint.label + "</strong> <br/>";
	str3 = "<span style = \"color:Tomato\">Total: </span><strong>" + total + "</strong><br/>";
	return (str2.concat(str)).concat(str3);
}

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

Tinh chỉnh biểu đồ

Người dùng thoải mái chỉnh sửa các thuộc tính trong mẫu biểu đồ JavaScript kể trên như ý muốn. Ví dụ:

showInLegend: Hiện chú giải cho từng chuỗi dữ liệu.
legendMarkerType: Các kiểu đánh dấu khác nhau cho chú giải.
legendText: Kiểu chữ chú giải
Shared(toolTip): Chia sẻ toolTip
Color: Màu sắc
fillOpacity: Độ trong suốt cho thành phần

Thứ Sáu, 24/02/2023 14:21

5 ★ 1 👨 234

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