你试过chartjs-plugin-datalabels吗？

const ctx = document.getElementById('myChart');

Chart.register(ChartDataLabels);

const generateColors = (n) =>
  Array.from({ length: n }, (_, i) => `hsl(${i / n * 360}, 100%, 80%)`)

const
  data = [300, 200, 150, 100, 80, 70, 50, 30, 20],
  sum = data.reduce((a, b) => a + b, 0),
  colors = generateColors(data.length);

new Chart(ctx, {
  type: 'pie',
  plugins: [ChartDataLabels],
  data: {
    labels: data.map((_, i) => `d${i+1}`),
    datasets: [{
      label: 'My First Dataset',
      data: data,
      backgroundColor: colors,
      hoverOffset: 4
    }]
  },
  options: {
    borderColor: 'rgba(0, 0, 0, 0.1)',
    color: '#FFF',
    plugins: {
      datalabels: {
        anchor: 'end',
        color: colors,
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
        borderRadius: 12,
        padding: 4,
        formatter: value => `${Math.round(value / sum * 100)}%`,
        labels: {
          title: {
            font: {
              weight: 'bold'
            }
          }
        }
      }
    }
  }
});

*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #000;
  display: flex;
  justify-content: center;
  padding: 4px;
}

.chart-container {
  width: 400px;
  height: 400px;
  background: #222;
  padding: 1rem;
  border: thin solid #777;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

我找到了解决办法：

<canvas id="myChart-tab1"></canvas>

<script>
    
    var ctx_tab1 = document.getElementById('myChart-tab1').getContext('2d');
    var labels = ['UNICEF', 'Save the Children', 'UNOCHA', 'World Food Programme', 'WHO', 'UNAMA', 'RED CRESCENT', 'UNFPA', 'UNCHR', 'UN WOMEN', 'WAR CHILD AFGHANISTAN'];
    var doughnutChart = new Chart(ctx_tab1, {
        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{
                backgroundColor: [
                    'rgba(255, 99, 132)',
                    'rgba(54, 162, 235)',
                    'rgba(255, 206, 86)',
                    'rgba(75, 192, 192)',
                    'rgba(153, 102, 255)',
                    'rgba(255, 159, 64)',
                    'rgba(255, 99, 132)',
                    'rgba(54, 162, 235)',
                    'rgba(255, 206, 86)',
                    'rgba(75, 192, 192)',
                    'rgba(153, 102, 255)',
                ],
                data: [41, 20, 9, 8, 8, 4, 3, 3, 2, 2, 10],
                datalabels: {
                    anchor: 'end',
                    align: 'end',
                }
            }]
        },
        options: {
            plugins: {
                datalabels: {
                    backgroundColor: function(context) {
                        // return context.dataset.backgroundColor;
                    },
                    // borderColor: 'white',
                    // borderRadius: 25,
                    // borderWidth: 2,
                    // color: 'white',
                    display: function(context) {
                        var dataset = context.dataset;
                        var count = dataset.data.length;
                        var value = dataset.data[context.dataIndex];
                        // return value > count * 1.5;
                        return value;
                    },
                    font: {
                        weight: 'bold'
                    },
                    padding: 0,
                    formatter: function(value) {
                        return value + '%';
                    }
                },
                legend: {
                    display: true,
                    position: 'right',
                    align: 'center',
                    labels: {
                        usePointStyle: true,
                        pointBackgroundColor: "rgba(0,191,255)",
                        pointStyle: 'rectRounded',
                        padding: 10,
                        color: '#000',
                        font: {
                            size: 12
                        },
                    },
                }
            },

            // Core options
            aspectRatio: 4 / 3,
            cutoutPercentage: 32,
            layout: {
                padding: 32
            },
            elements: {
                line: {
                    fill: false
                },
                point: {
                    hoverRadius: 7,
                    radius: 5
                }
            },
        }
    });
</script>