Code JavaScript tạo biểu đồ Doughnut có thể tùy chỉnh bán kính bên trong

Bạn có thể thay đổi bán kính bên trong của biểu đồ hình tròn dạng bánh donut hay doughnut để làm nó đẹp mắt hơn. Chỉnh kích thước bán kính bên trong sang 0 sẽ biến biểu đồ donut thành hình tròn. Tất nhiên, bạn vẫn có cách thay đổi bán kính bên ngoài của nó khi cần.

Ví dụ bên dưới minh hoạ một mẫu biểu đồ doughnut với bán kính bên trong có thể thay đổi. Biểu đồ này được tạo bằng JavaScript. Bài viết cung cấp cả mã nguồn cho bạn thoải mái chỉnh sửa như ý muốn.

Biểu đồ donut được tạo bằng JavaScript

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

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "dark2",
	exportFileName: "Doughnut Chart",
	exportEnabled: true,
	animationEnabled: true,
	title:{
		text: "Chi tiêu hàng tháng"
	},
	legend:{
		cursor: "pointer",
		itemclick: explodePie
	},
	data: [{
		type: "doughnut",
		innerRadius: 90,
		showInLegend: true,
		toolTipContent: "<b>{name}</b>: ${y} (#percent%)",
		indexLabel: "{name} - #percent%",
		dataPoints: [
			{ y: 450, name: "Thức ăn" },
			{ y: 120, name: "Bảo hiểm" },
			{ y: 300, name: "Du lịch" },
			{ y: 800, name: "Nhà cửa" },
			{ y: 150, name: "Giáo dục" },
			{ y: 150, name: "Mua sắm"},
			{ y: 250, name: "Chi phí khác" }
		]
	}]
});
chart.render();

function explodePie (e) {
	if(typeof (e.dataSeries.dataPoints[e.dataPointIndex].exploded) === "undefined" || !e.dataSeries.dataPoints[e.dataPointIndex].exploded) {
		e.dataSeries.dataPoints[e.dataPointIndex].exploded = true;
	} else {
		e.dataSeries.dataPoints[e.dataPointIndex].exploded = false;
	}
	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

Tinh chỉnh biểu đồ dạng bánh Donut bằng JavaScript

Bạn có thể thay đổi bán kính bên trong và ngoài của biểu đồ doughnut bằng thuộc tính innerRadius và radius có sẵn ở cấp độ chuỗi dữ liệu. Những lựa chọn tùy biến khác bao gồm startAngle, explodeOnClick, color...

Thứ Tư, 15/03/2023 14:09

5 ★ 1 👨 416

Bài trước

Biểu đồ/đồ thị Doughnut

Bài sau

Biểu đồ/đồ thị hình tròn

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