ng2-chart无法按预期显示，甚至控制台未显示任何错误 [英] ng2-chart doesn't display as expected even more the console doesn't show any error

问题描述

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，控制台中没有任何错误.Chrome中没有任何显示，并且我使用了Mac OS. 在html页面中，我可以找到png图像，但为空白:

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

解决方案

最近我遇到了类似的问题

如您在图片中看到的那样，如果父级(base-chart元素)的高度为0，则无法构建图表

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

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

插件示例(v1.1.0)

插件示例(当前版本)

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>

I use g2-chart,there have nothing error in console.and there is nothing display in chrome,and i use mac os. In html page ,i can find the png images ,but is blank:

someone can help me ,what happened .

解决方案

Recently i have faced a similar problem

As you can see in the picture if height of parent (base-chart element) is 0 then chart not be built

Try to add the following within your component annotation:

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

Plunker Example (v1.1.0)

Plunker Example (Current version)

这篇关于ng2-chart无法按预期显示，甚至控制台未显示任何错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！