如何使用react-chartjs-2.js 將文字放入圓環圖中?
P粉378264633
P粉378264633 2024-03-30 15:14:29
0
1
518

當圖表的標題位於頂部且標籤位於圓環圖右側時,如何使用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}/>

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

P粉378264633
P粉378264633

全部回覆(1)
P粉872101673

雷雷

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板