Chartjs和Angular 5出现错误-“无法从给定项目获取上下文”

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

他们都不工作，我认为这是因为打字稿没有“找到” 的 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

Answer 2

在创建图表的组件中使用模板参考引用画布。

Component（如果要在ngOnInit中生成图表，请使用static作为true）：

@ViewChild('grafico',{static:true}) grafico: Chart = []; 

模板（因为如果使用* ngIf，则如果条件为false，它将从dom中删除该元素）：

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

此外，您可以调试应用程序并验证是否正确创建了图表。