Я использую диаграммы и диаграмму ng2. js для создания кольцевой диаграммы.
Мне нужно центрировать текст внутри кольцевой диаграммы. Я использовал следующий подход.
https://stackblitz.com/edit/ng2-charts-doughnut-centertext?file=src%2Fapp%2Fapp.component.html
Однако я не могу динамически обновлять значение центрированного текста.
У меня есть свойство ввода под названием
@Input() total;
, и я хочу, чтобы это было внутри:
public doughnutChartPlugins: PluginServiceGlobalRegistrationAndOptions[] = [{
afterDraw(chart) {
const ctx = chart.ctx;
const txt = this.total;
//Get options from the center object in options
const sidePadding = 60;
const sidePaddingCalculated = (sidePadding / 100) * (chart.options.circumference / Math.PI)
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
const centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
const centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
//Get the width of the string and also the width of the element minus 10 to give it 5px side padding
const stringWidth = ctx.measureText(txt).width;
const elementWidth = (chart.options.circumference / Math.PI) - sidePaddingCalculated;
// Find out how much the font can grow in width.
const widthRatio = elementWidth / stringWidth;
const newFontSize = Math.floor(30 * widthRatio);
const elementHeight = (chart.options.circumference / Math.PI);
// Pick a new font size so it will not be larger than the height of label.
const fontSizeToUse = Math.min(newFontSize, elementHeight);
ctx.font = 'Arial';
ctx.fillStyle = 'white';
// Draw text in center
ctx.fillText(this.total, centerX, centerY);
}
}];
Как я могу этого добиться?
В настоящее время он показывает undefined, так как Код afterDraw (диаграммы) запускается перед инициализацией компонента.
Или есть способ решить это с помощью css (поскольку наблюдаемые прямо доступны внутри шаблона. html)
Кто-нибудь, пожалуйста, помогите.