Code JavaScript tạo biểu đồ hình tròn kèm chú giải
Chú giải trong biểu đồ hình tròn được hiển thị cho từng điểm dữ liệu thay vì dạng chuỗi. Tại sao lại như vậy? Vì từng phần trong biểu đồ hình tròn được chia tỷ lệ theo đóng góp của chúng vào tổng số. Bạn cũng có thể đính kèm sự kiện vào chú giải biểu đồ hoặc đồ thị.
Ví dụ bên dưới minh họa một mẫu biểu đồ hình tròn kèm chú giải có thể click được tạo bằng JavaScript. Bài viết cũng cung cấp mã nguồn cho người dùng chỉnh sửa trên trình duyệt hoặc lưu về máy để chạy nội bộ.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
exportEnabled: true,
animationEnabled: true,
title:{
text: "Quỹ hoạt động của tiểu bang"
},
legend:{
cursor: "pointer",
itemclick: explodePie
},
data: [{
type: "pie",
showInLegend: true,
toolTipContent: "{name}: <strong>{y}%</strong>",
indexLabel: "{name} - {y}%",
dataPoints: [
{ y: 26, name: "Hỗ trợ giáo dục", exploded: true },
{ y: 20, name: "Hỗ trợ y tế" },
{ y: 5, name: "Nợ/Vốn" },
{ y: 3, name: "Các quan chức được bầu chọn" },
{ y: 7, name: "Đại học" },
{ y: 17, name: "Hành pháp" },
{ y: 22, name: "Hỗ trợ địa phương 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
Tùy biến biểu đồ
Giống như mọi mẫu biểu đồ được tạo bằng JavaScript khác. Bạn có thể thay đổi một số thuộc tính để tạo được biểu đồ hình tròn như ý muốn. Ví dụ:
horizontalAlign
: Căn chỉnh theo chiều ngangverticalAlign
: Căn chỉnh theo chiều dọcItemclick:
Click vào chú giải để hiện sự kiệnexplodeOnClick
: Click để xem chi tiếtstartAngle
: Thay đổi gócindexLabel
: Nhãn chỉ mục- …
Trên đây là mẫu code JavaScript tạo biểu đồ hình tròn kèm chú thích đơn giản cho người mới bắt đầu. Hi vọng bài viết hữu ích với các bạn.
Bạn nên đọc


Cũ vẫn chất
-
Mẹo chơi trái Băng trong Blox Fruit
Hôm qua -
Giờ đẹp, hướng đẹp xuất hành mùng 1, 2, 4 Tết 2024
Hôm qua -
Bảng đơn vị đo khối lượng, cách đổi đơn vị đo khối lượng
Hôm qua -
Công thức tính diện tích tam giác: vuông, thường, cân, đều
Hôm qua 19 -
Ngày đẹp khai xuân 2024, ngày tốt khai trương đầu năm 2024
2 ngày -
Top 7 phần mềm giả lập PC trên Android
2 ngày -
Hóa vàng ngày nào đẹp Tết Giáp Thìn 2024
2 ngày -
11 ứng dụng bạn nên xóa ngay để tránh bị theo dõi
Hôm qua -
Ngày Hoàng đạo tháng 2 năm 2024, ngày đẹp tháng 2/2024
2 ngày -
Hướng dẫn tạo hiệu ứng động trong Canva
2 ngày