居中饼图

在饼图中居中显示文本可以通过一些图形库来实现，比如D3.js、Chart.js等。下面我将展示如何使用Chart.js来创建一个居中显示文本的饼图。

首先，确保你已经在HTML文件中引入了Chart.js库：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

然后，你可以使用以下代码来创建一个居中显示文本的饼图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centered Pie Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Red', 'Blue', 'Yellow'],
                datasets: [{
                    data: [30, 50, 20],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Centered Pie Chart',
                    fontColor: 'black',
                    fontSize: 24
                },
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 50,
                        bottom: 0
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                },
                cutoutPercentage: 70, // 设置饼图的中心空白区域大小
                tooltips: {
                    enabled: false
                }
            }
        });
    </script>
</body>

在这个例子中，我们使用了Chart.js库来创建一个饼图，并通过设置options中的title属性来在饼图上方添加一个居中的标题。我们还设置了cutoutPercentage属性来创建一个中心空白区域，这样可以使标题更加突出。

如果你想要在饼图的每个扇区内部居中显示数据标签，你可以使用plugins.legend和tooltips属性来禁用默认的图例和工具提示，然后自定义绘制数据标签。这通常需要更复杂的配置，可能需要使用Chart.js的插件系统或者自定义绘图逻辑。