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

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ứ Sáu, 24/02/2023 16:48
51 👨 170
0 Bình luận
Sắp xếp theo
    ❖ JavaScript