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

Question

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

Chart.js:9352 Failed to create chart: can't acquire context from the given item

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>

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

Answer 1

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

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

Answer 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
    }
}

让我知道它是否有用。祝你好运！

Answer 3

我在 Angular 12 的决心：

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

和 html:

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

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

Chart.js:9352 Failed to create chart. Unable to dynamically create charts

angular

typescript

chart.js

ngfor