Cara meletakkan teks ke dalam carta donat menggunakan react-chartjs-2.js dan Typescript apabila tajuk carta berada di bahagian atas dan label berada di sebelah kanan carta donat. Penyelesaian yang saya temui setakat ini nampaknya tidak berfungsi dengan tag sisi atau React/TS.
Ini yang saya ada sekarang:
...
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}/>
Tetapi ini hanya menjadikan teks di tengah-tengah keseluruhan kanvas, bukan di tengah-tengah donat.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
const plugins = [{ 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'; // Draw "Total" on the first line var text1 = 'Total'; var textX1 = Math.round((width - ctx.measureText(text1).width) / 2); var textY1 = height / 2.5; ctx.fillText(text1, textX1, textY1); // Draw the number on the second line var text2 = totalStatusCountRef.current; var textX2 = Math.round((width - ctx.measureText(text2).width) / 2); var textY2 = height / 1.9; ctx.fillText(text2, textX2, textY2); ctx.save(); } }];