如何使用react-chartjs-2.js 将文本放入圆环图中?
P粉378264633
P粉378264633 2024-03-30 15:14:29
0
1
520

当图表的标题位于顶部且标签位于圆环图右侧时,如何使用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

雷雷

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板