如何在react-chartjs-2的Doughnut Chart中添加数据标签？

以Chart.js为例（最常用的环形图库） #

要实现你想要的标签效果，需要用到chartjs-plugin-datalabels插件，步骤如下：

1. 准备依赖脚本
   先在项目里引入Chart.js核心库和chartjs-plugin-datalabels插件，可以通过官方下载包或者CDN方式引入。

2. 编写图表配置代码
   在初始化环形图时，开启数据标签插件，并自定义标签的样式、位置：

   // 获取画布上下文
   const ctx = document.getElementById('myDoughnutChart').getContext('2d');
   // 初始化图表
   const myChart = new Chart(ctx, {
       type: 'doughnut',
       data: {
           labels: ['分类A', '分类B', '分类C'],
           datasets: [{
               data: [35, 45, 20], // 对应各分类的数据值
               backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'] // 扇区颜色
           }]
       },
       options: {
           plugins: {
               datalabels: {
                   // 自定义标签内容：这里显示百分比
                   formatter: (value, ctx) => {
                       const total = ctx.dataset.data.reduce((sum, item) => sum + item, 0);
                       return `${(value / total * 100).toFixed(1)}%`;
                   },
                   // 标签位置：扇区外侧
                   anchor: 'end',
                   align: 'end',
                   // 标签样式设置
                   color: '#222',
                   font: {
                       weight: 'bold',
                       size: 12
                   },
                   // 标签与扇区的间距
                   offset: 15
               }
           }
       },
       // 注册数据标签插件
       plugins: [ChartDataLabels]
   });
   

用Highcharts实现的方式 #

如果项目用的是Highcharts，配置更直接，在plotOptions里开启数据标签即可：

Highcharts.chart('chartContainer', {
    chart: {
        type: 'doughnut'
    },
    plotOptions: {
        doughnut: {
            dataLabels: {
                enabled: true,
                // 标签显示百分比
                formatter: function() {
                    return `${this.percentage.toFixed(1)}%`;
                },
                // 标签与扇区的距离
                distance: 20
            }
        }
    },
    series: [{
        data: [35, 45, 20],
        name: '数据分类'
    }]
});

你提供的预期效果是：环形图的每个扇区外侧都带有清晰的百分比数据标签，标签位置与扇区保持合适间距，方便用户快速读取各分类占比。

内容的提问来源于stack exchange，提问作者Shahzad Qasir