Задать вопрос
@mspuz

Как сформировать график при открытии страницы?

Добрый вечер. Продолжаю постигать 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, но не помогло.
  • Вопрос задан
  • 25 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы