如何在图表js的图表中间显示值

Question

这是我的要求：

• 我想在半甜甜圈图的中间显示文本。
• 我必须在甜甜圈图的开始和结尾处添加值。
• 我在文本后的甜甜圈图的中间添加了华氏符号。

这张照片显示了我的要求。

我当前的一半甜甜圈图看起来像这样。

这是我的代码：

html：

    <div class="chart-container" >
          <canvas id="temp"></canvas>
     </div>

js：

   var myChart = new Chart('temp', {
   type: 'doughnut',
   data: {
     labels: ['Temperature'],
     datasets: [{
        label: 'Temperature',
        data: [12],
        backgroundColor: "#077d07",
        borderColor: "#077d07",
        borderWidth: 1
    }]
  },
  options: {
    responsive:true,
    circumference: Math.PI,
    rotation:Math.PI,
    title: {
        display: true,
        text: '50' ,
        position: 'bottom'
     },
   legend: {
        position: 'top',
    },
    animation: {
        animateScale: true,
        animateRotate: true
    }
}
});