爲什麼我的Angular 4 ChartJS組件不能渲染？

我想弄清楚爲什麼角4 ChartJS組件不呈現。爲什麼我的Angular 4 ChartJS組件不能渲染？

我已經安裝了使用紗線的包裝，它存在並正確導入。我可以在chrome控制檯中看到Chart對象，但畫布元素保持空白。

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

來源

2017-07-30 Jack Murphy

您需要確保含元件具有`塊」的顯示類型canvas元件。如前面的線程指出，它可以被包裝在一個div，或angular4，只需將設置：主機CSS元素：

:host { 
    display: block 
}

來源

2017-09-11 14:22:18

您需要包圍內部div

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

來源

2017-07-30 05:44:48

這工作 - 可以請你修改你的答案來解釋爲什麼我會將其標記爲已接受。 –

這似乎只是設置：在CSS文件中的主機{顯示：塊}也適用 –

爲什麼我的Angular 4 ChartJS組件不能渲染？

回答

相關問題