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
…
261
Bạn nên đọc
0 Bình luận
Sắp xếp theo
![❖](https://st.quantrimang.com/photos/avatars/default.png)
Xóa Đăng nhập để Gửi
![❖](https://st.quantrimang.com/photos/image/icon/javascript-64-size-24x24-znd.png)
Cũ vẫn chất
-
Cách viết chữ màu Liên Quân Mobile
2 ngày 2 -
2 cách lặp lại thanh tiêu đề trong Word cho bảng
Hôm qua -
Quay màn hình máy tính bằng OBS Studio, cách ghi màn hình laptop trên OBS
2 ngày -
44 phím tắt hữu dụng trên tất cả trình duyệt
Hôm qua 2 -
Hướng dẫn cách kẻ chéo ô trong Excel
2 ngày -
Cách quản lý mật khẩu đã lưu trên Microsoft Edge: Xem, xóa, sửa, xuất
Hôm qua -
Reset rank Liên Quân mùa 27
2 ngày -
Code Hello Cafe VNG mới nhất và cách nhập code
2 ngày -
Cách sửa lỗi không tải được file lên Google Drive
Hôm qua -
Những câu stt hay tâm trạng về lặng nhìn cuộc sống
Hôm qua