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
-
Cách mở tab ẩn danh trên Chrome, Cốc Cốc, Firefox,...
Hôm qua -
58 câu ca dao, tục ngữ, thành ngữ về cuộc sống ẩn chứa những bài học ý nghĩa
Hôm qua -
Các màu trái tim trên Messenger có ý nghĩa gì?
Hôm qua 2 -
Ca dao, tục ngữ, thành ngữ về tiết kiệm
Hôm qua -
Câu nói hay về ăn uống, stt về ăn uống hay và hài hước
Hôm qua 1 -
Mã lệnh GTA Vice City, cheat Grand Theft Auto: Vice City
Hôm qua 7 -
Cách xem mật khẩu đã lưu trên Chrome, xóa mật khẩu nhanh chóng
Hôm qua -
Cách tải video Youtube đơn giản, nhanh
Hôm qua 26 -
Bài tập C++ có lời giải (code mẫu)
Hôm qua 2 -
Bạn có biết ý nghĩa của những biểu tượng emoticon mà chúng ta hay dùng?
Hôm qua 1