角度5图表。js无法创建图表

在组件中。html

问题是ngIf。只要*ngIf==false,画布就不存在,因此图表无法找到画布。js。将标记更改为,它应该可以工作

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

作为 documentation 表示:

要创建图表,我们需要实例化chart类。为此, 我们需要传入 绘制图表的画布

因此,您的代码应该如下所示:

var canvas = <HTMLCanvasElement> document.getElementById("canvas");
var ctx = canvas.getContext("2d");
this.chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["a", "b", "c", "d", "e"],
        datasets: [
          {
            title: "Some Data",
            values: [25, 40, 30, 35, 100],
            borderColor: "#3cba9f",
            fill: false
          },
        ]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{
            display: true
          }],
        }
      }
    });
}