Chart.JS + Angular

Я новичок в Угловой и хочу отображать диаграммы с динамическими данными.

Я пытаюсь с Chart.js, я сделал импорт, и примеры работают.

Итак, в основном система получает данные в формате JSON из PHP, и я их показываю.

`<div *ngFor = "let i of idspreguntas; let f = index">
 <canvas id = "{{i}}"></canvas>
 <span *ngIf = "f == max2-1" id = "inservible">
     {{loadGraphics()}}
 </span>
 </div>`

Но вот проблема, которую HTML-код выполняет после того, как я установил свойства диаграммы, и не работает.

Мое решение заключалось в проверке последней позиции массива (ранее преобразованного из JSON) и выполнении loadGraphics (). Я дал больше времени на добавление тайм-аута для каждой диаграммы.

loadGraphics() {
    $('#inservible').remove();
    let index = 0;
    console.info(this.lista);
    for (const i of this.lista) {
        setTimeout(this.cargaChart(i, index), 2000);
        index++;
    }
}

Я знаю, что это очень плохая практика, но не знаю, как это сделать.

Наконец, вот функция cargaChart

cargaChart(i, u) {
  const respu = [];
  const cont = [];
  if (i.Respuesta1 !== '') {
    respu.push(i.Respuesta1);
    cont.push(i.Contador1);
  }
  if (i.Respuesta2 !== '') {
    respu.push(i.Respuesta2);
    cont.push(i.Contador2);
  }
  if (i.Respuesta3 !== '') {
    respu.push(i.Respuesta3);
    cont.push(i.Contador3);
  }
  if (i.Respuesta4 !== '') {
    respu.push(i.Respuesta4);
    cont.push(i.Contador4);
  }
  if (i.Respuesta5 !== '') {
    respu.push(i.Respuesta5);
    cont.push(i.Contador5);
  }
  if (i.Pregunta !== '') {
    const myChart = new Chart($('#' + i.idPregunta)[0].getContext('2d'), {
      type: 'bar',
      data: {
        labels: respu,
        datasets: [{
          label: i.Pregunta,
          data: cont,
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1,
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
            }
          }]
        }
      },
    });
  }
}

Это уникальный метод, который у меня сработал. (Почти)

The last dataof array doesn't work console said 'TypeError: Cannot read property 'getContext' of undefined'

Но только в последней позиции хорошо работают другие позиции.

Здесь JSON

[{"idPregunta":"04QLDT5S","NumeroPregunta":"3","Nombre":"¿Quién eres?","Pregunta":"¿Quién eres?","Respuesta1":"Yo","Contador1":"0","Respuesta2":"Tú","Contador2":"1","Respuesta3":"Ella","Contador3":"0","Respuesta4":"","Contador4":0,"Respuesta5":"","Contador5":0},{"idPregunta":"0Z000BZ8","Pregunta":"Qué hace","Respuesta1":"Nada","Contador1":"0","Respuesta2":"Llorando","Contador2":"0","Respuesta3":"Triste","Contador3":"0","Respuesta4":"","Contador4":"0","Respuesta5":"","Contador5":"0"},{"idPregunta":"0Y2FG4XL","Pregunta":"¿Qué duces = ","Respuesta1":"Nada","Contador1":"0","Respuesta2":"Algo","Contador2":"0","Respuesta3":"Simbólico","Contador3":"0","Respuesta4":"Majestuoso","Contador4":"0","Respuesta5":"Brilante","Contador5":"0"}]

Извините за всех .. Я учусь.