图表部分为空答案

【问题标题】：Chart section is empty图表部分为空
【发布时间】：2019-02-05 10:36:20
【问题描述】：

我正在尝试向 Angular 项目添加一些图表，但它总是显示为空

组件

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)'
        }]
      }
    });
  }
}

&lt;canvas id="canvas"&gt;{{ chart }}&lt;/canvas&gt;

但是，我只是得到一个空白页

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

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

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

【问题讨论】：

教程在画布元素周围有<div *ngIf="chart">，你也尝试过吗？
只有在组件的图表对象不为空时才显示图表
你试过了吗？我认为问题在于您需要在修改图表对象后调用chart.update()，但如果您在它周围有一个 *ngIf 则不需要，因为图表在呈现时将拥有它需要的所有数据。听起来图表在设置数据之前正在渲染。请参阅此文档：chartjs.org/docs/latest/developers/updates.html
添加了，没运气，请看更新
chart.update() 成功了。谢谢！

标签： angular typescript chart.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

:host {
  display: block;
}

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

【讨论】：