如何使用react-chartjs-2.js 將文字放入圓環圖中？

Question

當圖表的標題位於頂部且標籤位於圓環圖右側時，如何使用react-chartjs-2.js 和 Typescript 將文字放入圓環圖中。到目前為止我找到的解決方案似乎不適用於側面的標籤或 React/TS。

這就是我現在擁有的：

...

setOptions({
   responsive: true,
   plugins: {
     legend: {
       position: 'right',
       rtl : true,
       labels: {
         usePointStyle: true,
         pointStyle: 'circle',
       }
     },
     title: {
       display: true,
       text: 'Title',
       font: {
         size: 25,
       }
     }
   },
});
    
setPlugins ({
    id: "tooltipLine",
    beforeDraw: function(chart) {
      var width = chart.width,
      height = chart.height,
      ctx = chart.ctx;
      ctx.restore();
      var fontSize = (height / 160).toFixed(2);
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "top";
      var text = "Foo-bar",
      textX = Math.round((width - ctx.measureText(text).width) / 2),
      textY = height / 2;
      ctx.fillText(text, textX, textY);
      ctx.save();
    }
})
<Doughnut id="pieChart" data={data} options={options} plugins={[plugins] as any}/>

但這只是使文字位於整個畫布的中間，而不是甜甜圈的中間。

Answer 1

雷雷