Code mẫu JavaScript tạo spline chart kèm chú thích

Kandy Kandy

Hiện chú thích trong biểu đồ nhiều chuỗi sẽ giúp người xem dễ đọc thông tin hơn. Spline Chart - Biểu đồ nối hàm giống như các dạng biểu đồ/đồ thị khác trong thư viện CanvasJS đều có hỗ trợ chú thích.

Chú thích hay chú giải trên biểu đồ cung cấp mô tả ngắn về dữ liệu được hiển thị. Điều đó giúp bạn dễ xác định từng chuỗi dữ liệu trong biểu đồ.

Ví dụ bên dưới minh họa một mẫu biểu đồ nhiều chuỗi dữ liệu kèm chú thích. Bài viết bao gồm cả code JavaScript tạo mẫu biểu đồ này để bạn có thể chỉnh sửa trong trình duyệt hoặc lưu về máy chạy nội bộ.

Mẫu biểu đồ nối hàm bằng JavaScript

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title:{
		text: "Huy chương vàng đã giành được ở Olympics"             
	}, 
	axisY:{
		title: "Số huy chương"
	},
	toolTip: {
		shared: true
	},
	legend:{
		cursor:"pointer",
		itemclick: toggleDataSeries
	},
	data: [{        
		type: "spline",  
		name: "Mỹ",        
		showInLegend: true,
		dataPoints: [
			{ label: "Atlanta 1996" , y: 44 },     
			{ label:"Sydney 2000", y: 37 },     
			{ label: "Athens 2004", y: 36 },     
			{ label: "Bắc Kinh 2008", y: 36 },     
			{ label: "London 2012", y: 46 },
			{ label: "Rio 2016", y: 46 }
		]
	}, 
	{        
		type: "spline",
		name: "Trung Quốc",        
		showInLegend: true,
		dataPoints: [
			{ label: "Atlanta 1996" , y: 16 },     
			{ label:"Sydney 2000", y: 28 },     
			{ label: "Athens 2004", y: 32 },     
			{ label: "Bắc Kinh 2008", y: 48 },     
			{ label: "London 2012", y: 38 },
			{ label: "Rio 2016", y: 26 }
		]
	},
	{        
		type: "spline",  
		name: "Anh",        
		showInLegend: true,
		dataPoints: [
			{ label: "Atlanta 1996" , y: 1 },     
			{ label:"Sydney 2000", y: 11 },     
			{ label: "Athens 2004", y: 9 },     
			{ label: "Bắc Kinh 2008", y: 19 },     
			{ label: "London 2012", y: 29 },
			{ label: "Rio 2016", y: 27 }
		]
	},
	{        
		type: "spline",  
		name: "Nga",        
		showInLegend: true,
		dataPoints: [
			{ label: "Atlanta 1996" , y: 26 },     
			{ label:"Sydney 2000", y: 32 },     
			{ label: "Athens 2004", y: 28 },     
			{ label: "Bắc Kinh 2008", y: 22 },     
			{ label: "London 2012", y: 20 },
			{ label: "Rio 2016", y: 19 }
		]
	},
	{        
		type: "spline",  
		name: "Hàn Quốc",        
		showInLegend: true,
		dataPoints: [
			{ label: "Atlanta 1996" , y: 7 },     
			{ label:"Sydney 2000", y: 8 },     
			{ label: "Athens 2004", y: 9 },     
			{ label: "Bắc Kinh 2008", y: 13 },     
			{ label: "London 2012", y: 13 },
			{ label: "Rio 2016", y: 9 }
		]
	},  
	{        
		type: "spline",  
		name: "Đức",        
		showInLegend: true,
		dataPoints: [
			{ label: "Atlanta 1996" , y: 20 },     
			{ label:"Sydney 2000", y: 13 },     
			{ label: "Athens 2004", y: 13 },     
			{ label: "Bắc Kinh 2008", y: 16 },     
			{ label: "London 2012", y: 11 },
			{ label: "Rio 2016", y: 17 }
		]
	}]
});

chart.render();

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

Tùy biến biểu đồ

Bạn có thể kích hoạt chú giải bằng thuộc tính showInLegend. Bạn cũng có thể thay đổi nội dung trong chú thích bằng legendText. legendMarkerType đổi kiểu đánh dấu cho dataSeries.

Một số tùy chỉnh khác bao gồm:

legendMarkerColor - Màu đánh dấu chú thích
legendMarkerBorderThickness - Độ dày đường viền đánh dấu chú thích
legendSize - Kích thước chú giải

Thứ Tư, 01/02/2023 14:31

3 ★ 1 👨 223

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