html - Chartjs 和 Angular 5 上的错误 - "can' t 从给定项目获取上下文”

Question

我需要在我的 Angular 项目中显示一个图表。包含 3 个数据集的简单圆环图。当我尝试运行该项目时，控制台抛出以下错误:

“创建图表失败:无法从给定项目获取上下文”

我已经阅读了文档，使用了模板，甚至检查了 StackOverflow 的几个问题:

• chart.js Failed to create chart: can't acquire context from the given item
• Using Chart.js on Angular 4
• Angular/Chart.js error: Failed to create chart: can't acquire context from the given item

它们都不起作用，我认为这是由于 typescript 没有“找到”的ID，但我真诚地不这样做知道我做错了什么

代码如下:

HTML

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

typescript

    import Chart = require('chart.js');

    grafico: any;

    this.grafico = new Chart('grafico',{
    type:"doughnut",
    data:{
      labels: ['Expirados', 'Sem exames', 'Proximo de expirar'],
      datasets:[
        { // Exames expirados
          data:res[0].num_funcion_expir, // Data from API
          backgroundColor:'#EA3100'
        },
        { // Exames expirados
          data:res[0].num_funcion_sem_exam_ini, // Data from API
          backgroundColor:'#ff6384'
        },
        { // Exames expirados
          data:res[0].num_funcion_expir_prox_exam, // Data from API
          backgroundColor:'#EAA900'
        },
      ]
    },
    options:{
      legend:{
        display:true
      }
    }
  });

感谢任何帮助

Answer 1

你只需要把这个添加到html模板

<div [hidden]="!grafico"><canvas id="grafico">{{ grafico }}</canvas></div>

Here is an example of Angular using Chart.JS