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>
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;
}`
],
来源:https://stackoverflow.com/questions/37849490/ng2-chart-doesnt-display-as-expected-even-more-the-console-doesnt-show-any-err