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
...
409
Bạn nên đọc
-
Code JavaScript tạo biểu đồ hình tròn kèm chú giải
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
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
-
JavaScript là gì?
-
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 biểu đồ thác nước với màu sắc tùy biến
-
Code JavaScript tạo biểu đồ/đồ thị động
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
4 lời khuyên giúp bạn đặt câu hỏi thông minh
Hôm qua -
Hướng dẫn cách chơi, lên đồ Allain mùa S1 2023
Hôm qua -
3 yếu tố cốt lõi của một bài thuyết trình thành công
Hôm qua -
Cách tìm trang web đã mở trên chế độ ẩn danh
Hôm qua 2 -
Nhà nghỉ gần đây, tìm khách sạn gần đây trên điện thoại nhanh nhất
Hôm qua -
Cách tạo Header, Footer khác nhau trên Word
Hôm qua -
Cách thiết lập font chữ mặc định và kích thước font chữ trên Excel
Hôm qua -
Tổng hợp câu hỏi khó về tình yêu của con gái và bí kíp trả lời hoàn hảo cho các chàng
Hôm qua -
9 cách mở công cụ Apps & Features trên Windows 11
Hôm qua -
Remote Desktop Connection: Cách thiết lập chi tiết, 100% truy cập máy tính qua Internet thành công
Hôm qua 2