餅圖

Old_Arthurㄟ發表於2024-10-24
<!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>

相關文章