Диаграмма. js Диаграмма в Angular не загружается до изменения размера окна браузера. - PullRequest
Новая
       52

Диаграмма. js Диаграмма в Angular не загружается до изменения размера окна браузера.

2 голосов
/ 02 мая 2020

Я сейчас работаю над хобби-проектом, где я загружаю некоторые данные из базы данных MongoDB, получаю данные из node.js бэкэнда в мой интерфейс, там я манипулирую своими данными и, наконец, хочу показать данные в Мой Angular интерфейс в Chart. js chart.

Проблема в том, что я получаю данные без проблем, и если я загружаю Chart с некоторыми фиктивными данными, все работает отлично, но когда Я пытаюсь загрузить реальные данные в мою диаграмму, она не отображается, пока я не изменю размер окна или, например, не нажму f12 для проверки моего веб-сайта.

Заранее спасибо!

Здесь приведен упрощенный код : 

allTitles = [];
allSets = [];
allColors = [];

// OnInit:

this.chart = new Chart('myChart', {
  type: 'doughnut',
  options: {
    responsive: true,
  },
  data: {
    labels: this.allTitles,
    datasets: [
      {
        label: 'My First dataset',
        data: this.allSets,
        backgroundColor: this.allColors,
        borderColor: '#000000'
      }
    ]
  }
});

// A Function to get the Data from my Service:

this.parseService.getPlans().subscribe((plans: any) => {
    plans.forEach(plan => {
      this.parseService.getExercisesByPlan(plan._id).subscribe((exercises: any) => {
        this.neighbourSetsCounter = 0;
        exercises.forEach(exercise => {
          this.neighbourSetsCounter += exercise.sets;
        });
        this.allTitles[this.neighbourCounter] = plan.title;
        this.allSets[this.neighbourCounter] = this.neighbourSetsCounter;
        this.allColors[this.neighbourCounter] = plan.color;

        this.neighbourCounter++;
      });
    });
  });

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

Я решил проблему как-то. (возможно, не самое элегантное решение) Проблема заключалась в том, что Веб-сайт хотел отобразить диаграмму до полной загрузки данных для Диаграммы. (Как показано выше) Я просто добавил setTimeout для ожидания 100 мс перед отображением графика.

Если есть более элегантное решение, не стесняйтесь показывать мне; D

0 голосов
/ 02 мая 2020

Ссылки на эти 3 массива 

allTitles = [];
allSets = [];
allColors = [];

, которые используются в диаграмме, не обновляются, когда происходит getExercisesByPlan, а ANgular ChangeDetector не знает gr asp, что ему нужно обнаружить изменяет и, возможно, обновляет разметку. Вы изменяете элементы массивов, но свойства по-прежнему имеют те же ссылки внутри.

Не беспокойтесь, если это трудно понять - тогда ссылки и указатели на c ++ были основные причины, по которым студенты решили сменить карьеру и отказались от разработки программного обеспечения: D вы получите это из приведенных ниже решений.

Возможное решение - создать новый массив: 

this.allTitles = [...this.neighbourCounter, plan.title];
this.allSets = [...this.neighbourCounter, this.neighbourSetsCounter];
this.allColors = [...this.neighbourCounter, plan.color];

Вы также можете инициировать обнаружение изменений вручную: Запуск обнаружения изменений вручную в Angular

...