Добрый вечер. Продолжаю постигать Angular. Добрался до графического отображения данных. Т.к. шаблон разработан на bootstrap, то решил использовать вот такой
компонент
В примере используются переменные, которые принимают значения уже при объявлении. Понимаю, что спрашиваю глупость, но как мне реализовать отображение графика, если данные я высчитываю динамически.
Т.е. в шаблоне у меня используется:
<canvas mdbChart
[chartType]="chartType"
[datasets]="chartDatasets"
[labels]="chartLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="true"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
Все перечисленные переменные я вычисляю в коде, с помощью функции:
updateDatasetsAndLabels() {
let dataSets: Array<number> = []
let cLabels: Array<string> = []
let tbackgroundColor: Array<string> = []
let thoverBackgroundColor: Array<string> = []
for(let i = 0; i < this.organization.length; i++) {
dataSets.push(this.organization[i].summa)
cLabels.push(this.organization[i].name)
tbackgroundColor.push(this.abackgroundColor[i])
thoverBackgroundColor.push(this.ahoverBackgroundColor[i])
}
this.chartDatasets = [ { data: dataSets } ]
this.chartLabels = cLabels
this.chartColors = [{backgroundColor: tbackgroundColor, hoverBackgroundColor: thoverBackgroundColor, borderWidth: 2}]
}
Как и где мне выполнить этот код, чтобы у меня график отобразился сразу при переходе к странице. Сейчас у меня получилось разместить кнопку и при нажатии отрабатывает данная функция, как результат - график отображается. Но хотелось бы, чтобы он отобразился при отображении страницы. Пробовал разместить этот код в функциях ngAfterViewInit, но не помогло.