Chart.js Angular中的Chart在调整浏览器窗口大小之前不会加载。

Question

我目前正在做一个业余项目，我从MongoDB数据库中加载一些数据，然后从node.js后端把数据GET到我的前端，在那里我操作我的数据，最后我想在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++;
      });
    });
  });

Answer 1

这3个数组的引用

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

的时候不更新。getExercisesByPlan 发生，而ANgular ChangeDetector不知道掌握它需要检测变化并可能更新标记.你改变了数组的元素，但属性内部仍然有相同的引用。

如果这很难理解，也不用太担心--当时，c++引用和指针是学生们决定改变自己的职业道路而放弃软件开发的主要原因：D你会从下面的解决方案中得到答案。

可能的解决方案是创建一个新的数组。

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

你也可以手动触发变化检测。在Angular中手动触发变化检测

Answer 2

我以某种方式解决了这个问题。(也许不是最优雅的解决方案)问题是，网站想在图表数据完全加载之前显示图表。(就像上面的mansioned)我只是添加了一个setTimeout来等待100ms后再显示图表。

如果有更优雅的解决方案，请毫不犹豫地告诉我;D