Раздел диаграммы пуст

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---Tutorial

Обновление: Итак, попытался добавить ваше предложение, но ничего не получилось, но я взглянул на объект диаграмм и увидел это

Я вижу, что свойства 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