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