Question

我正在试图找出为什么角度4 ChartJS组件没有呈现的原因。

我已经使用纱线安装了包，它存在并正确导入。我可以在chrome控制台中看到Chart对象，但canvas元素仍为空白。

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

@Component({
  selector: 'app-root',
  template: '<canvas #aChart></canvas>',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  @ViewChild('aChart') htmlChart: ElementRef;
  public data = {
    labels: [
      'Value A',
      'Value B'
    ],
    datasets: [
      {
        'data': [101342, 55342],   // Example data
        'backgroundColor': [
          '#1fc8f8',
          '#76a346'
        ]
      }]
  };

  constructor(public myElement: ElementRef) {}

  ngOnInit() {
    const ctx: CanvasRenderingContext2D = this.htmlChart.nativeElement.getContext('2d');
    const newChart: Chart = new Chart(ctx, {
      'type': 'doughnut',
      'data': this.data,
      'options': {
        'cutoutPercentage': 50,
        'animation': {
          'animateScale': true,
          'animateRotate': false
        }
      }
    });
    console.log('chart', newChart);
  }
}

Answer 1

您需要在canvas

中附上div元素

template: '<div><canvas #aChart></canvas></div>',

Answer 2

您需要确保包含元素的显示类型为“block”。正如在前面的线程中所指出的，它可以包装在div中，或者在angular4中，只需将：host css元素设置为：

:host { 
  display: block 
}

为什么我的Angular 4 ChartJS组件不能渲染？

2 个答案: