當圖表的標題位於頂部且標籤位於圓環圖右側時,如何使用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}/>
但這只是使文字位於整個畫布的中間,而不是甜甜圈的中間。
雷雷