小编Gra*_*f-J的帖子

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

我目前正在开发一个业余爱好项目,我从 MongoDB 数据库加载一些数据,从 Node.js 后端获取数据到我的前端,在那里我操作我的数据,最后我想在我的 Angular 前端显示数据在 Chart.js 图表中。

存在问题:我得到的数据没有任何问题,如果我用一些模拟数据加载图表,一切都会完美运行,但是当我尝试在图表中加载真实数据时,它不会显示,直到我调整窗口大小或例如按 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 …
Run Code Online (Sandbox Code Playgroud)

javascript typescript chart.js angular

5
推荐指数
1
解决办法
2378
查看次数

标签 统计

angular ×1

chart.js ×1

javascript ×1

typescript ×1