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.

<!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...
Bạn nên đọc
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo mẫu biểu đồ/đồ thị Doughnut
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code JavaScript tạo biểu đồ thác nước đa chuỗi dữ liệu
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code JavaScript tạo biểu đồ hình tròn kèm chú giải
-
Code JavaScript tạo biểu đồ thác nước với màu sắc tùy biế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:
Cũ vẫn chất
-

6 cách đánh số trang trong Excel cực nhanh và dễ
Hôm qua -

Tổng hợp phím tắt Đấu Trường Chân Lý
Hôm qua -

Kết quả của các trận đấu trong Record of Ragnarok
Hôm qua -

Cloudflare WARP là gì? Có nên sử dụng không?
Hôm qua 2 -

Cách tạo sticker tùy chỉnh trên Telegram
Hôm qua -

Hàm Round, cách dùng hàm làm tròn trong Excel
Hôm qua -

Cách thay đổi thiết lập con chuột trong Windows
Hôm qua -

Cách view source, xem mã nguồn trang web bằng điện thoại, máy tính
Hôm qua 1 -

Sáng lạng hay xán lạn, từ nào đúng chính tả?
Hôm qua -

Câu nói hay về người thứ ba, stt về người thứ ba trong tình yêu thâm thúy
Hôm qua
Học IT
Microsoft Word 2013
Microsoft Word 2007
Microsoft Excel 2019
Microsoft Excel 2016
Microsoft PowerPoint 2019
Google Sheets
Lập trình Scratch
Bootstrap
Hướng dẫn
Ô tô, Xe máy