如何在Chart.js饼图中用百分比替代计数显示？

你可以通过以下修改实现饼图内部显示百分比、悬浮提示保留计数的需求：

1. 修正代码结构 #

你的Chart实例配置里重复定义了options属性，这会导致配置被覆盖，需要把所有配置合并到一个options对象中。

2. 配置chartjs-plugin-datalabels插件 #

通过插件的formatter函数计算每个数据项的占比，同时设置标签的显示位置和样式。另外注意要把你的totalData从字符串转为数字，否则无法正确计算百分比。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Total Chart - Pie Chart with Labels</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
  <style>
    #totalChart{
        width: 400px !important;
        height: 400px !important;
    }
  </style>
</head>
<body>
  <div style="text-align: center;">
    <h2>Total Chart - Pie Chart with Labels</h2>
    <canvas id="totalChart" width="400" height="400"></canvas>
  </div>

  <script>
        var totalLabels = ["HD","SKY"];
        // 把字符串数据转为数字，方便计算百分比
        var totalData = [138,251];

        // Generate Facebook pie chart
        var facebookCtx = document.getElementById('totalChart');
        new Chart(facebookCtx, {
            type: 'pie',
            data: {
                labels: totalLabels,
                datasets: [{
                    label: 'no of Leads',
                    data: totalData,
                    borderWidth: 1
                }]
            },
            plugins: [ChartDataLabels],
            options: {
                plugins: {
                    // 配置datalabels插件
                    datalabels: {
                        // 计算百分比的格式化函数
                        formatter: (value, ctx) => {
                            const total = ctx.dataset.data.reduce((acc, curr) => acc + curr, 0);
                            const percentage = ((value / total) * 100).toFixed(2);
                            return `${percentage}%`;
                        },
                        // 设置标签在饼图内部的位置
                        align: 'center',
                        anchor: 'center',
                        // 标签样式
                        color: '#fff',
                        font: {
                            weight: 'bold',
                            size: 14
                        }
                    },
                    // 保留tooltip的计数显示
                    tooltip: {
                        callbacks: {
                            label: (ctx) => {
                                return `${ctx.label}: ${ctx.raw}`;
                            }
                        }
                    }
                }
            }
        });
  </script>
</body>
</html>

关键代码说明 #

• 数据类型转换：把totalData的字符串值转为数字，确保百分比计算正确。
• formatter函数：通过reduce计算数据总和，再用当前数据除以总和得到百分比，toFixed(2)保留两位小数。
• datalabels位置配置：align: 'center'和anchor: 'center'确保标签显示在饼块中心。
• tooltip配置：自定义label回调，让悬浮提示依然显示原始计数数值。

内容的提问来源于stack exchange，提问作者Kaushik C