Code JavaScript tạo biểu đồ/đồ thị hình tròn
Biểu đồ hình tròn có thể dễ dàng được tạo bằng JavaScript. Dưới đây là code mẫu JavaScript đơn giản nhất để tạo biểu đồ hình tròn.
JavaScript là một trong số ngôn ngữ lập trình phổ biến nhất hiện nay. Bạn có thể dùng JavaScript để lập trình web, ứng dụng, thậm chí cả tạo biểu đồ.
Tạo biểu đồ bằng code JavaScript không khó. Bạn có thể tham khảo mục code mẫu trên Quantrimang.com. Ở bài viết này, bạn sẽ được hướng dẫn code biểu đồ hình tròn đơn giản bằng JavaScript.
JavaScript Pie Chart chia một hình tròn thành nhiều phần theo tỷ lệ để người dùng thấy rõ đóng góp của chúng với con số tổng. Biểu đồ hình tròn hữu ích trong việc so sánh thị phần hoặc tỷ lệ của các nhân tố khác nhau. Biểu đồ hình tròn có thể tương tác, phản hồi nhanh, hỗ trợ hoạt ảnh và được xuất dưới dạng ảnh, đồng thời dễ dàng tích hợp với các framework JavaScript phổ biến.
Ví dụ bên dưới minh họa một mẫu biểu đồ hình tròn được tạo bằng JavaScript. Bài viết cũng cung cấp mã nguồn HTML cho bạn thoải mái chỉnh sửa 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", {
animationEnabled: true,
title: {
text: "Thị phần công cụ tìm kiếm trên desktop - 2016"
},
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##0.00\"%\"",
indexLabel: "{label} {y}",
dataPoints: [
{y: 79.45, label: "Google"},
{y: 7.31, label: "Bing"},
{y: 7.06, label: "Baidu"},
{y: 4.91, label: "Yahoo"},
{y: 1.26, label: "Others"}
]
}]
});
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ể tùy biến color của từng phần riêng lẻ bằng color hoặc thay đổi góc của hình tròn bằng startAngle.
Một số lựa chọn tùy biến khác bao gồm: radius, fillOpacity, indexLabelPlacement…
Bạn nên đọc
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
-
Code Wuthering Waves mới nhất 18/05/2025 và hướng dẫn đổi code
2 ngày -
Tổng hợp 1001+ thuật ngữ trong Liên Quân Mobile
2 ngày 7 -
Outlook là gì? Cách sử dụng Outlook cho người mới
2 ngày -
Cách thức tỉnh trái ác quỷ Blox Fruit
2 ngày -
Cách tìm tài khoản liên kết với địa chỉ email
Hôm qua -
Hình nền trắng, ảnh nền trắng đẹp
3 ngày -
Tại sao khởi động lại router có thể khắc phục được nhiều vấn đề?
Hôm qua -
Cách kích hoạt Windows Subsystem for Linux trên Windows
Hôm qua -
19/5 là ngày gì? Ngày 19 tháng 5 năm 1890 là ngày gì?
Hôm qua 6 -
Khối D01 thi môn nào, học ngành nào?
Hôm qua