图部分是空的

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建造-AN-角5 chart.js之应用程式---教程

更新：所以，尝试添加您的建议，没有工作，但我花了偷看图表对象，并看到了这

我看到，在画布和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