Javascript 无法向甜甜圈图表上的ChartJSImage添加可见标签

let data = {
  labels: [
    'Carbs',
    'Protien',
    'Fats'
  ],
  datasets: [{
    data: [70, 30, 50],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    
    // Configuring labels for the specific dataset
    datalabels: {
      anchor: 'center',
      backgroundColor: null,
      borderWidth: 0
    },
  }]
};

var options = {
  type: 'doughnut',
  data,
  
  // Adding the Plugin to the Chart
  plugins: [ChartDataLabels],
  
  options: {
    maintainAspectRatio: false,
    legend: { display: false },
    cutout: 20,
    plugins: {
    
      // Configuring the plugin
      datalabels: {
        color: 'white',
        formatter: function (value, context) {
          return `${value} cal`;
        },
        font: {
          weight: 'bold'
        },
        padding: 6,
      }
    },
  },
}

const chart = document.getElementById('chart1')
new Chart(chart, options);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

<div style="width:500px;height:184px">
   <canvas id="chart1" width="500" height="184"></canvas>
<div>

{
    type: 'doughnut',
    data:{
        labels: [
          'Carbs',
          'Protien',
          'Fats'
        ],
        datasets: [{
          data: [70, 30, 50],
          backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)'
          ],
        }]
      },
    options: {
      maintainAspectRatio: false,
      legend: { display: false },
      datalabels: ["70 cal", "30 cal", "50 cal"]
    },
  }