图表部分为空

Question

我试图将一些图表添加到有角项目中，但始终显示为空

组件

import {
  Component,
  OnInit
} from '@angular/core';
import {
  Router
} from '@angular/router';
import {
  Chart
} from 'chart.js';

import * as _ from 'lodash';
import * as moment from 'moment';

@Component({
  selector: 'app-venta-grafica',
  templateUrl: './venta-grafica.component.html',
  styleUrls: ['./venta-grafica.component.css']
})
export class VentaGraficaComponent implements OnInit {

  chart: any = null;

  constructor(
    private router: Router) {}

  ngOnInit() {
    this.chart = new Chart("canvas", {
      type: 'bar',
      data: {
        labels: ['1', '2', '3'],
        datasets: [{
          label: 'test1',
          data: [10, 20, 30],
          backgroundColor: 'rgba(255, 0, 0, 0.5)'
        }]
      }
    });
  }
}

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

但仍然，我只能得到一个空白页面

有什么想法吗？我正在使用这个网站的例子 https://coursetro.com/posts/code/126/Let's-build-an-Angular-5-Chart.js-App ---教学课程

更新： 因此，尝试添加您的建议，没有一个奏效，但是我偷看了图表对象并看到了

我看到canvas和ctx属性为null，那么，图表对象是否没有获取将在其上呈现的元素？

Answer 1

初始化图表对象后，调用chart.update()。请参阅此处的用于修改图表数据的文档：chartjs.org/docs/latest/developers/updates.html

Answer 2

在使用图表的组件中，将其添加到组件的CSS中：

:host {
  display: block;
}

结果：https://stackblitz.com/edit/angular-mqsupm