<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>餅圖示例</title>
<script src="/chart.js"></script>
<style>
.btn1{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="btn1">
<canvas id="myPieChart" width="400" height="400"></canvas>
</div>
<script>
// 獲取canvas元素
const ctx = document.getElementById('myPieChart').getContext('2d');
// 定義餅圖數據
const data = {
labels: [
'嚴重缺陷：23',
'一般缺陷:93',
'致命缺陷：88'
],
datasets: [{
label: '缺陷分布',
data: [23, 93, 88], // 嚴重缺陷和一般缺陷的數量、致命缺陷的數量
backgroundColor: [
'#ff6384', // 嚴重缺陷的顏色
'#36a2eb', // 一般缺陷的顏色
'#f3c' //致命缺陷
],
hoverOffset: 4
}]
};
// 定義餅圖配置
const config = {
type: 'pie', // 圖表類型
data: data, // 圖表數據
options: {
responsive: true, // 響應式設計
plugins: {
tooltip: {
callbacks: {
label: function (tooltipItem) {
// 格式化標簽顯示
const label = tooltipItem.label || '';
const value = tooltipItem.raw;
const percentage = Math.round((value / (23 + 93)) * 100); // 計算百分比
return `${label}: ${value} (${percentage}%)`;
}
}
}
}
}
};
// 創建餅圖實例
const myPieChart = new Chart(ctx, config);
</script>
</body>
</html>
浙公網安備 33010602011771號