Я пытаюсь отключить значения внутри ярлыков пончика, но не могу понять это после попытки все отключить. Кроме того, у меня будет sh, чтобы числовой текст внутри моего пончика был больше. Ниже скриншот того, что у меня сейчас. Стрелки указывают на проблемы, которые я описал выше. Заранее спасибо!
Мой фрагмент кода плагина
afterUpdate(chart) {
let helpers;
let centerConfig;
let globalConfig;
let ctx;
let fontStyle;
let fontFamily;
let fontSize;
if (chart.config.options.elements.center) {
helpers = Chart.helpers;
centerConfig = chart.config.options.elements.center;
globalConfig = Chart.defaults.global;
ctx = chart.chart.ctx;
fontStyle = helpers.getValueOrDefault(
centerConfig.fontStyle, globalConfig.defaultFontStyle
);
fontFamily = helpers.getValueOrDefault(
centerConfig.fontFamily, globalConfig.defaultFontFamily
);
if (centerConfig.fontSize) {
fontSize = centerConfig.fontSize;
} else {
ctx.save();
fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1);
ctx.restore();
}
const newChart = chart;
newChart.center = {
font: helpers.fontString(fontSize, fontStyle, fontFamily),
fillStyle: helpers.getValueOrDefault(
centerConfig.fontColor, globalConfig.defaultFontColor
)
};
}
},
afterDraw(chart) {
if (chart.center) {
const centerConfig = chart.config.options.elements.center;
const ctx = chart.chart.ctx;
ctx.save();
ctx.font = chart.center.font;
ctx.fillStyle = chart.center.fillStyle;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
const centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
const centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
let helpers = Chart.helpers;
let fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1);
let text = centerConfig.text.split('\ ');
ctx.fillText(text[0], centerX, centerY - fontSize / 2);
ctx.fillText(text[1], centerX, centerY + fontSize / 2);
ctx.fillText(text[2], centerX, centerY + 10 + fontSize);
ctx.fillText(text[3], centerX, centerY + 25 + fontSize);
ctx.restore();
}
},
});
<Doughnut
width={120}
height={100}
data={donutData}
options={{
cutoutPercentage: 55,
elements: {
center: {
text: `${numeral(donutData.total).format("0,0")} ${innerTopText} ${innerMiddleText} ${innerBottomText}`,
fontColor: "#666666",
fontFamily: "Allianz-Neo",
fontStyle: "bold",
minFontSize: 15,
maxFontSize: 20
}
},
plugins: {
outlabels: {
backgroundColor: "white", // Background color of Label
borderColor: "none", // Border color of Label
borderRadius: 0, // Border radius of Label
borderWidth: 0, // Thickness of border
color: "black", // Font color
display: false,
lineWidth: 1, // Thickness of line between chart arc and Label
padding: 0,
lineColor: "black",
textAlign: "center",
stretch: 45,
},
labels: false,
},
legend: {
display: false,
},
tooltips: {
backgroundColor: "#003781",
displayColors: false,
borderColor: "white",
borderWidth: 2,
}
}}
/>