当图表的标题位于顶部且标签位于圆环图右侧时,如何使用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}/>
但这只是使文本位于整个画布的中间,而不是甜甜圈的中间。
雷雷