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
Cũ vẫn chất
-
Cách sửa lỗi IRQL NOT LESS OR EQUAL trên Windows
Hôm qua -
Mua laptop Windows hiện khó hơn bao giờ hết
Hôm qua -
Pokemon Go - Thủ thuật tiến hóa Eevee thành bất cứ loại Pokemon nào
Hôm qua -
Code GoGo Tam Quốc mới nhất
Hôm qua -
Cách tạo USB boot đa năng, USB cứu hộ bằng DLC Boot
Hôm qua -
Thơ về chiến thắng Điện Biên Phủ 'lừng lẫy năm châu, chấn động địa cầu'
Hôm qua -
Tại sao giao diện Windows lại ngày càng rời rạc?
Hôm qua -
Cách xóa tin nhắn Telegram, lịch sử tin nhắn Telegram
Hôm qua -
Sửa lỗi Fatal Error Wuthering Waves
Hôm qua -
Đây là quốc gia duy nhất từng lấy cờ trắng làm quốc kỳ
Hôm qua