Angular中PrimeNG+ChartJS实现自定义厚度环形图的问题

在Angular项目中使用PrimeNG搭配ChartJS，需要实现单数据集的环形图，每个数据值对应不同的环厚度，但现有代码无法实现该效果。现有实现代码如下：

HTML代码 #

<p-chart type="doughnut" [data]="donutData" [options]="donutChartOptions" class="h-10 my-4"></p-chart>

TypeScript代码 #

this.donutData = {
    labels: ['A', 'B', 'C'],
    datasets: [
        {
            data: [300, 50, 100],
            backgroundColor: ['#F36F56', '#FFC300', '#B8A3FF'],
            hoverBackgroundColor: ['#F36F56', '#FFC300', '#B8A3FF'],
        },
    ],
};

this.donutChartOptions = {
    cutout: 50,
    plugins: {
        legend: {
            display: false,
            labels: {
                color: '#ebedef',
            },
        },
    },
};

ChartJS原生单数据集环形图无法直接实现分段厚度不同的效果，因为单个数据集的环形厚度由统一的cutout和radius控制。要实现需求，需将每个数据点拆分为独立数据集，通过设置不同的cutout和radius控制每个环的厚度，每个数据集仅保留对应数据点。

修改后的TypeScript代码 #

const dataValues = [300, 50, 100];
const total = dataValues.reduce((sum, val) => sum + val, 0);
const baseRadius = '100%';
let currentCutout = 0;

this.donutData = {
    labels: ['A', 'B', 'C'],
    datasets: dataValues.map((val, index) => {
        // 根据数据占比计算环厚度（百分比）
        const thickness = (val / total) * 100;
        const datasetCutout = `${currentCutout}%`;
        currentCutout += thickness;

        return {
            data: [val, total - val], // 第二个值用透明色填充剩余区域
            backgroundColor: [
                ['#F36F56', '#FFC300', '#B8A3FF'][index],
                'transparent'
            ],
            hoverBackgroundColor: [
                ['#F36F56', '#FFC300', '#B8A3FF'][index],
                'transparent'
            ],
            borderWidth: 0,
            radius: baseRadius,
            cutout: datasetCutout
        };
    })
};

this.donutChartOptions = {
    plugins: {
        legend: {
            display: false,
        },
        tooltip: {
            callbacks: {
                label: function(context) {
                    return `${this.donutData.labels[context.datasetIndex]}: ${context.parsed}`;
                }.bind(this)
            }
        }
    },
    animation: {
        animateRotate: true,
        animateScale: false
    }
};

代码说明 #

• 将每个数据点拆分为独立数据集，每个数据集仅渲染对应厚度的环，剩余区域用透明色填充
• 按数据值占比分配环厚度，保证厚度与数据值成正比
• 通过递进设置cutout值，形成同心环效果
• 自定义tooltip回调，仅显示当前环的标签和数据值

内容的提问来源于stack exchange，提问作者Emilio Ferrer