ng2-chart 没有按预期显示更多控制台没有显示任何错误

Question

mychart.component.ts

import {Component} from '@angular/core';
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';
import { ROUTER_DIRECTIVES, Router } from '@angular/router';
import { Http, Response, HTTP_PROVIDERS } from '@angular/http';
import { CORE_DIRECTIVES, NgIf, NgFor, FormBuilder, Validators, Control, ControlGroup, FORM_DIRECTIVES, NgClass} from '@angular/common';
import { DashboardComponent } from '../dashboard/dashboard.component';
import { Auth } from'../auth/auth';
import { Config} from '../config/config';
// webpack html imports

@Component({
 moduleId: module.id,
 selector: 'mychart', 
 templateUrl: 'mychart.component.html',
 directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]

})
export class MychartComponent {
 public lineChartData: Array<any> = [
  [65, 59, 80, 81, 56, 55, 40],
  [28, 48, 40, 19, 86, 27, 90]
 ];
 public lineChartbels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 public lineChartType:string = 'line';
 public pieChartType:string = 'pie';
 public lineChartOptions:any = {
     animation: false,
     responsive: true
 };
   // Pie
 public pieChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
 public pieChartData:number[] = [300, 500, 100];
 constructor(private _router: Router, private _auth: Auth, private _config: Config, private _http: Http,  _formBuilder: FormBuilder) {
  console.log(CHART_DIRECTIVES);
 }
 public randomizeType(): void {
  console.log(this.lineChartType);
  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);
   }
}

mychart.component.html

<base-chart class="chart" id="myChart"
                [data]="lineChartData"
                [labels]="lineChartLabels"
                [options]="lineChartOptions"
                [chartType]="lineChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></base-chart>

我用的是g2-chart，console.and没有错误，chrome没有任何显示，我用的是macos。在 html 页面，我可以找到 png 图片，但是是空白的：

有人可以帮助我，发生了什么事。

Answer 1

最近遇到了类似的问题

如图所示，如果父级（base-chart 元素）的高度为 0，则不会构建图表

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

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

Plunker Example (v1.1.0)

Plunker Example (Current version)

ng2-chart 没有按预期显示更多控制台没有显示任何错误

ng2-chart doesn't display as expected even more the console doesn't show any error

ng2-charts

angular