Biểu đồ vành khuyên tương tự như biểu đồ hình tròn ngoại trừ khu vực bị cắt ở giữa biểu đồ hình tròn.
Nó hiển thị các phân vùng ra khỏi ranh giới được thực hiện. Vòng tròn của biểu đồ hình tròn hoặc bánh rán là ranh giới và các phân vùng đưa ra số liệu thống kê quan hệ.
Ví dụ nhanh này có Chart JS JavaScript để hiển thị biểu đồ vành khuyên. Trước đó, chúng tôi đã bắt đầu với biểu đồ đường Chart JS và đã thấy nhiều ví dụ cho thư viện này.
ví dụ nhanh
<!DOCTYPE html>
<html>
<head>
<title>Chart JS Doughnut</title>
<link rel="stylesheet" href=" type="text/css" />
</head>
<body>
<div class="PHP-container">
<h1>Chart JS Doughnut</h1>
<div>
<canvas id="chartjs-doughnut"></canvas>
</div>
</div>
<script
src="
<script>
new Chart(document.getElementById("chartjs-doughnut"), {
type: 'doughnut',
data: {
labels: ["Lion", "Horse", "Elephant", "Tiger",
"Jaguar"],
datasets: [{
backgroundColor: ["#51EAEA", "#FCDDB0",
"#FF9D76", "#FB3569", "#82CD47"],
data: [418, 263, 434, 586, 332]
}]
},
options: {
title: {
display: true,
text: 'Chart JS Doughnut.'
},
cutout: '60%', // the portion of the doughnut that is the cutout in the middle
radius: 200
}
});
</script>
</body>
</html>
Trong một bài viết trước, chúng ta đã xem cách tạo thư viện Chart JS JavaScript để tạo biểu đồ hình tròn.
Biểu đồ bánh rán mã chỉ khác nhau bởi thuộc tính loại: bánh rán thay vì loại: bánh.
đầu ra
Nó hiển thị số lượng của một con vật trên mỗi cánh của cuộc trò chuyện donut.
Như trong ví dụ về biểu đồ hình tròn, tên động vật được lấy cho “nhãn” tài sản. Số lượng của mỗi con vật là dữ liệu biểu đồ. Màu nền khác nhau phân loại nó trong biểu đồ bánh rán.
Hình dưới đây cho thấy đầu ra của ví dụ bánh rán Chart JS này.
Biểu đồ bánh rán với cơ sở dữ liệu PHP và MySQL
Ví dụ này sẽ hữu ích nếu bạn muốn hiển thị dữ liệu động từ nguồn bên ngoài.
Nó sử dụng một nguồn cơ sở dữ liệu để cung cấp dữ liệu cho biểu đồ vành khuyên Chart JS.
Các db_chartjs_data là cơ sở dữ liệu chứa tbl_marks bàn. Nó có điểm của sinh viên theo tỷ lệ phần trăm.
Biểu đồ bánh rán sẽ hiển thị số học sinh đạt được một tỷ lệ phần trăm cụ thể.
donut-chart-with-php-database.php
<?php
$conn = new mysqli('localhost', 'root', '', 'db_chartjs_data');
$sql = "SELECT count(*) as marks_percentage_count, percentage FROM tbl_marks GROUP BY percentage";
$result = $conn->query($sql);
{
$label = array();
$percentage = array();
while ($row = $result->fetch_assoc()) {
$label[] = $row["percentage"] . "%";
$percentage[] = $row["marks_percentage_count"];
}
}
$chartLabel = json_encode($label);
$chartData = json_encode($percentage);
?>
<!DOCTYPE html>
<html>
<head>
<title>Doughnut Chart with PHP and MySQL Database</title>
<link rel="stylesheet" href=" type="text/css" />
</head>
<body>
<div class="PHP-container">
<h1>Doughnut Chart with PHP and MySQL Database</h1>
<div>
<canvas id="chartjs-doughnut"></canvas>
</div>
</div>
<script
src="
<script>
new Chart(document.getElementById("chartjs-doughnut"), {
type: 'doughnut',
data: {
labels: <? php echo $chartLabel; ?>,
datasets: [{
backgroundColor: ["#51EAEA", "#FCDDB0",
"#FF9D76", "#FB3569", "#82CD47"],
data: <? php echo $chartData; ?>
}]
},
options: {
title: {
display: true,
text: 'Chart JS Doughnut'
},
cutout: '60%', // the portion of the doughnut that is cutout in the middle
radius: 200
}
});
</script>
</body>
</html>
Đây là tập lệnh cơ sở dữ liệu để nhập trước khi chạy ví dụ này.
db_chartjs_data.sql
--
-- Database: `db_chartjs_data`
--
--
-- Table structure for table `tbl_marks`
--
CREATE TABLE `tbl_marks` (
`id` int(11) NOT NULL,
`name` varchar(55) NOT NULL,
`percentage` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `tbl_marks`
--
INSERT INTO `tbl_marks` (`id`, `name`, `percentage`) VALUES
(1, 'John', 85),
(2, 'Matthew', 85),
(3, 'Tim', 65),
(4, 'Clare', 75),
(5, 'Viola', 85),
(6, 'Vinolia', 75),
(7, 'Laura', 85),
(8, 'Leena', 75),
(9, 'Evan', 85),
(10, 'Ellen', 90);
--
-- Indexes for table `tbl_marks`
--
ALTER TABLE `tbl_marks`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_marks`
--
ALTER TABLE `tbl_marks`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
Mã này chuẩn bị một truy vấn để lấy số học sinh được nhóm theo tỷ lệ phần trăm. Có bốn tỷ lệ phần trăm riêng biệt trong cơ sở dữ liệu.
Ảnh chụp màn hình đầu ra này hiển thị số học sinh đạt được một tỷ lệ phần trăm cụ thể.
đầu ra
Tập lệnh ChartJS để hiển thị biểu đồ vành khuyên yêu cầu thuộc tính (tùy chọn) bổ sung. Đó là, các cắt ra thuộc tính được chỉ định trong ChartJS tùy chọn mảng.
Nó chấp nhận giá trị theo tỷ lệ phần trăm. Nó quyết định vùng cắt trong suốt từ giữa biểu đồ vành khuyên.
Tải xuống
Xem thêm tin mới và bổ ích tại:
– Kiến thức gia đình
– Tri thức đời sống
– Kênh youtube Kiến thức gia đình