Chart.js:9352 创建图表失败。无法动态创建图表答案

【问题标题】：Chart.js:9352 Failed to create chart. Unable to dynamically create chartsChart.js:9352 创建图表失败。无法动态创建图表
【发布时间】：2019-12-17 14:53:38
【问题描述】：

您好，当我尝试在我的 Angular 项目中动态创建一些图表时，我遇到了这个错误。

Chart.js:9352 未能创建图表：无法从给定项目

export class StudentStudyProgressComponent implements OnInit {
  charts = [];
  semesters = [1, 2, 3, 4, 5, 6];

  constructor(private logic: LogicService) {
  }

  ngOnInit() {
    this.makeDetailCharts(this.semesters);
  }

  private makeDetailCharts(semesters: number[]) {
  semesters.forEach((semester)=>{

   this.charts.push(
    new Chart('chartStudyProgress' + semester, {
      type: 'doughnut',
      data: {
        labels: ['Geslaagd', 'Opgenomen', 'Resterend'],
        datasets: [
          {
            data: this.logic.giveStudyProgressForSemester(this.student.Curriculum, semester),
            borderColor: "#3cba9f",
            backgroundColor: [
              ('#66B266'),
              ('#FFFF66'),
              ('#FF7F7F')
            ]
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: 'Semester '+semester
        },
        legend: {
          display: false
        },
      }
    })
   );
  });
 }
}

我认为当我想在我的 html 中动态创建图表时会出现问题：

 <div class="row" *ngFor="let semester of semesters">
  <div class="col-4">
   <div [hidden]="!charts">
    <canvas id="{{'chartStudyProgress'+semester}}" style="max-width: 30%;">{{ charts[semester] }}</canvas>
   </div>
  </div>
 </div>

如果我静态声明图表，它会起作用：

<div class="row" >
 <div class="col-4">
  <div [hidden]="!charts">
   <canvas id="chartStudyProgress1" style="max-width: 30%;">{{ charts[1] }}</canvas>
   <canvas id="chartStudyProgress2" style="max-width: 30%;">{{ charts[2] }}</canvas>
   <canvas id="chartStudyProgress3" style="max-width: 30%;">{{ charts[3] }}</canvas>
   <canvas id="chartStudyProgress4" style="max-width: 30%;">{{ charts[4] }}</canvas>
   <canvas id="chartStudyProgress5" style="max-width: 30%;">{{ charts[5] }}</canvas>
   <canvas id="chartStudyProgress6" style="max-width: 30%;">{{ charts[6] }}</canvas>
  </div>
 </div>
</div>

是否有专家可以帮助我动态创建图表？

【问题讨论】：

数组从 0 开始。

标签： angular typescript chart.js ngfor

【解决方案1】：

您正在尝试在视图中创建画布之前获取它们。使用ngAfterViewInit 而不是ngOnInit：

ngAfterViewInit() {
  this.makeDetailCharts(this.semesters);
}

【讨论】：

谢谢！我是 Angular 的新手，所以我不知道 ngAfterViewInit() 的存在

【解决方案2】：

我不是专家，但我认为这不是您应该声明图表的方式。相反，我会这样称呼它：

<canvas
        id="{{'chartStudyProgress'+semester}}"
        [data]="chartData"
        [labels]="chartLabels"
        [chartType]="chartType"
        [legend]="chartLegend"
        [colors]="chartColors"
        [options]="chartOptions">
</canvas>

然后，我会在 ts 文件中声明这些变量。例如：

this.chartData = this.logic.giveStudyProgressForSemester(this.student.Curriculum, semester); 
this.chartType = 'doughnut';
this.chartColors = [
            {
                backgroundColor: [('#66B266'), ('#FFFF66'), ('#FF7F7F')],
                borderColor: "#3cba9f"
            }
        ];
this.chartOptions = {
    title: {
      display: true,
      text: 'Semester '+semester
    },
    legend: {
      display: false
    }
}

如果有用，请告诉我。祝你好运！

【讨论】：

我所要做的就是使用 ngAfterViewInit 而不是 ngOnInit。这为我解决了问题

【解决方案3】：

我在 Angular 12 中的决心：

const ctx = document.getElementById(id);
if (!ctx) return;

在 html 中：

<canvas id="{{id}}"></canvas>

【讨论】：