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中没有任何错误。并且chrome中没有任何显示，我使用mac os。在html页面中，我可以找到png图像，但是空白：

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

Answer 1

最近我遇到了类似的问题

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

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

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

<强> Plunker Example (v1.1.0)

<强> Plunker Example (Current version)

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

1 个答案: