So fügen Sie mit „react-chartjs-2.js“ und Typescript Text in ein Donut-Diagramm ein, wenn sich der Titel des Diagramms oben und die Beschriftung auf der rechten Seite des Donut-Diagramms befindet. Die Lösungen, die ich bisher gefunden habe, scheinen mit Side-Tags oder React/TS nicht zu funktionieren.
Das habe ich jetzt:
...
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}/>
Aber dadurch wird der Text nur in der Mitte der gesamten Leinwand platziert, nicht in der Mitte des Donuts.
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(); } }];