Code JavaScript tạo biểu đồ hình tròn với bán kính tùy chỉnh
Bạn có thể tùy biến bán kính/kích thước của biểu đồ hình tròn được tạo bằng JavaScript như ý muốn. Thư viện cung cấp một số lựa chọn cho bạn thay đổi diện mạo và chức năng của biểu đồ. Bạn cũng có thể thay đổi góc bắt đầu của biểu đồ hình tròn hoặc màu riêng cho từng điểm dữ liệu.
Ví dụ bên dưới minh họa một mẫu biểu đồ hình tròn với bán kính có thể thay đổi được tạo bằng JavaScript. Bài viết cũng cung cấp mã nguồn cho bạn chỉnh sửa trong 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", {
theme: "light2",
animationEnabled: true,
title: {
text: "Thị phần phát điện bằng nhiên liệu"
},
subtitles: [{
text: "Vương quốc Anh, 2016",
fontSize: 16
}],
data: [{
type: "pie",
indexLabelFontSize: 18,
radius: 80,
indexLabel: "{label} - {y}",
yValueFormatString: "###0.0\"%\"",
click: explodePie,
dataPoints: [
{ y: 42, label: "Gas" },
{ y: 21, label: "Năng lượng hạt nhân"},
{ y: 24.5, label: "Năng lượng tái tạo" },
{ y: 9, label: "Than đá" },
{ y: 3.1, label: "Nhiên liệu khác" }
]
}]
});
chart.render();
function explodePie(e) {
for(var i = 0; i < e.dataSeries.dataPoints.length; i++) {
if(i !== e.dataPointIndex)
e.dataSeries.dataPoints[i].exploded = false;
}
}
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</div>
</body>
</html>
Nguồn: CanvasJS
Tinh chỉnh biểu đồ
Màu sắc và độ mờ của điểm dữ liệu có thể được thay đổi bằng cách dùng thuộc tính color
và fillOpacity
có sẵn ở cấp chuỗi dữ liệu. Những lựa chọn tùy chỉnh thường dùng khác là explode
, startAngle
…
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 thay đổi DNS Server trên Windows 11
Hôm qua -
Code Tiếu Ngạo Gamota mới nhất đổi vàng khóa, đàn hương
Hôm qua -
5 mẹo xem lịch sử máy tính trên iPhone
Hôm qua -
Cách khắc phục lỗi ghép nối Bluetooth “Try Connecting Your Device” trong Windows 10/11
Hôm qua -
2 tỉnh miền núi là nơi có tốc độ mạng nhanh nhất Việt Nam
Hôm qua -
Công thức tính thể tích khối trụ và ví dụ minh họa
Hôm qua -
Tổng hợp code Pet Compact mới nhất 5/2025
Hôm qua -
Microsoft ra mắt Windows 11 IoT Enterprise LTSC 2024 với khả năng hỗ trợ thiết bị rộng hơn và nhiều thay đổi lớn
Hôm qua -
280 triệu người đã cài đặt tiện ích Chrome bị nhiễm malware
Hôm qua -
6 cách tra cứu điểm thi vào lớp 10 Hà Nội 2025
Hôm qua