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
-
Tổng hợp bài tập JavaScript có code mẫu
Hôm qua 1 -
Các cách căn giữa ô trong bảng trên Word
Hôm qua 1 -
Cách tải và cập nhật driver Bluetooth cho Windows 10
Hôm qua -
Những câu hỏi đáng suy ngẫm về giá trị cuộc sống
Hôm qua -
Bao nhiêu người có thể sử dụng cùng lúc một tài khoản Netflix?
Hôm qua -
Cách kiểm tra phiên bản Excel đang sử dụng
Hôm qua -
Khắc phục sự cố không thể chạy được file .exe
Hôm qua 4 -
Lệnh ALTER TABLE trong SQL Server
Hôm qua -
8 bước khắc phục sự cố mất âm thanh trong Windows
Hôm qua 2 -
Cách gỡ cài đặt và xóa Google Drive khỏi PC hoặc Mac
Hôm qua