NG2-圖表始終顯示沒有在我的angular2 JS項目

Question

的源代碼是： https://github.com/DeronLee/Fitness.git

它已經在屏幕上出任何工作輸出。

我只關注http://valor-software.com/ng2-charts/並想添加一些圖表。 我嘗試了條形圖和線條圖。所有的東西都可以正常工作，但圖表總是沒有任何東西

組件文件：

import {Component, OnInit} from '@angular/core' 
import {NgFor, NgClass, NgIf} from "@angular/common"; 
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from "@angular/common" 
import {DataService} from './services/data' 
import {Data} from "./interface/interface"; 
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts'; 

@Component({ 
    selector: 'display', 
    directives: [CORE_DIRECTIVES, NgFor, NgClass, NgIf, CHART_DIRECTIVES, FORM_DIRECTIVES], 
    templateUrl: './app/display.component.html', 
    providers: [DataService] 
}) 


export class DisplayComponent implements OnInit { 
    public data; 

    getData(){ 
     this.data = this.dataService.getData()[0] 
    } 


    constructor(private dataService:DataService){ 

    } 

    ngOnInit(){ 
     this.getData() 
    } 

    // lineChart 
    public lineChartData:Array<any> = [ 
     [65, 59, 80, 81, 56, 55, 40], 
     [28, 48, 40, 19, 86, 27, 90] 
    ]; 
    public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; 
    public lineChartType:string = 'line'; 
    public pieChartType:string = 'pie'; 

    // Pie 
    public pieChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales']; 
    public pieChartData:number[] = [300, 500, 100]; 

    public randomizeType():void { 
     this.lineChartType = this.lineChartType === 'line' ? 'bar' : 'line'; 
     this.pieChartType = this.pieChartType === 'doughnut' ? 'pie' : 'doughnut'; 
    } 

    public chartClicked(e:any):void { 
     console.log(e); 
    } 

    public chartHovered(e:any):void { 
     console.log(e); 
    } 
} 

的HTML

<div *ngIf="data"> 
    <span>Type {{data.type}}</span> 
    <span>Name {{data.name}}</span> 



</div> 
<div class="col-md-6"> 

    <base-chart class="chart" 
       [data]="lineChartData" 
       [labels]="lineChartLabels" 
       [options]="lineChartOptions" 
       [chartType]="lineChartType" 
       (chartHover)="chartHovered($event)" 
       (chartClick)="chartClicked($event)"></base-chart> 
</div> 
<div class="col-md-6"> 
    <base-chart class="chart" 
       [data]="pieChartData" 
       [labels]="pieChartLabels" 
       [chartType]="pieChartType" 
       (chartHover)="chartHovered($event)" 
       (chartClick)="chartClicked($event)"></base-chart> 
</div> 
<div class="col-md-12 text-center" style="margin-top: 10px;"> 
    <button (click)="randomizeType()" style="display: inline-block">Toggle</button> 
</div> 

Answer 1

嘗試添加您的組件註釋中的以下內容：

@Component({ 
    ... 
    styles: [` 
    .chart { 
     display: block; 
    }` 
    ],