0

源代码在： https ://github.com/DeronLee/Fitness.git

它已经在屏幕上没有任何输出的情况下工作。

我只是关注http://valor-software.com/ng2-charts/并想添加一些图表。我尝试了条形图和折线图。一切正常，但图表总是什么都没有。

页面视图 chrome开发者工具中的元素

组件文件：

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

1 回答 1

2

尝试在组件注释中添加以下内容：

@Component({
  ...
  styles: [`
    .chart {
      display: block;
    }`
  ],
于 2016-06-16T04:21:26.247 回答