Javascript 在调整浏览器窗口的大小之前，不会加载角度中的Chart.js图表

我目前正在从事一个业余项目，我从MongoDB数据库加载一些数据，从node.js后端将数据获取到前端，在那里我操作数据，最后我想在Chart.js 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++;
      });
    });
  });

---

对这3个数组的引用

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

当发生

getExercisesByPlan

且角度变化检测器不知道需要检测变化并可能更新标记时，图表中使用的属性不会更新。您可以更改数组的元素，但其中的属性仍具有相同的引用

<> P>不要太担心，如果不理解的话，C++的引用和指针是学生决定改变他们的职业道路并放弃软件开发的主要原因：D你会从下面的解决方案中得到。 可能的解决方案是创建一个新阵列：

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

---

您还可以手动触发更改检测：

此问题发生在Firefox上，而不是Chrome上

在任何情况下，我只在数据准备就绪时才显示图表

<p-chart *ngIf="data" type="line" [data]="data" [options]="options"></p-chart>

---

注意：p-chart是Prime NG的一个组件，它包装了chart.js

在完成数组中数据的更新后，调用

this.chart.update（）

---

我发现了同样的问题

我是这样解决的：

myChart.update（）

myChart.updateDataset（）

所以，基本上，
update（）
方法不会触发
updateDataset（）
，您必须手动执行

弗朗切斯克·曼雷萨
//通过设置时间函数进行修复
设置超时（（）=>{
//图表数据在这里
}, 1000);我不熟悉Chart.js或Angular，但您是否试图在检索数据之前显示数据？那可能是你的问题。在GET请求完成之前，您的组件可能正在呈现。请不要只发布代码作为答案，还要提供代码的作用以及它如何解决问题的解释。带有解释的答案通常更有帮助，质量更好，更容易吸引选票。