Estructuré un gráfico de barras horizontales usando ng2-charts en angular2, pero no estoy seguro de por qué no veo los datos del gráfico ni veo ningún error en mi consola.
HTML:
<canvas baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"> </canvas>Componente:
result: Iresult[] = []; barChartLabels: string[] =[]; barChartType: string = 'horizontalBar'; barChartLegend: boolean = true; barChartData: any[] = []; barChartOptions: any = { scaleShowVerticalLines: false, responsive: true }; barChartLabels: string[] =[]; barChartType: string = 'horizontalBar'; barChartLegend: boolean = true; barChartData: any[] = []; getData(){ this.dataService.getData().subscribe( data => { this.result = data; this.barChartLabels = this.result.map(item => item.label); console.log(this.barChartLabels); // RESULT: ["test 1", "test 2"] this.barChartData = this.result.map(item => item.data); console.log(this.barChartData); // RESULT: [25, 55] }, error => this.errorMessage = <any>error); console.log(this.barChartLabels); // RESULT: [] console.log(this.barChartData); // RESULT: [] }Archivo JSON:
[ { "id": 5, "label": "test 1", "data": 25 }, { "id": 6, "label": "test 2", "data": 55 } ]Archivo de servicio:
getData(): Observable<IChartData[]>{ return this._http.get('https://api.myjson.com/bins/ywavt') .map((res:Response) => <IChartData[]> res.json()) .do(data => console.log('All: ' + JSON.stringify(data))) //DEBUG USE .catch(this.handleError); } private handleError(error: Response) { console.error(error); return Observable.throw(error.json().error || 'Server error'); } //Console do result: All: [{"id":5,"label":"test 1","data":25},{"id":6,"label":"test 2","data":55}]Clase de interfaz
export interface IChartData { id: number; label: string; data: any; }ACTUALIZAR
Aquí hay un Plunker de lo que tengo hasta ahora: https://plnkr.co/edit/0GyFTkuqF7m8JhUKK6Kl?p=preview
Las etiquetas no se muestran, pero una barra horizontal de color no se coloca correctamente.
subscribe , una solución funcional es usar un indicador de carga combinado con *ngIf para esperar a que se carguen los datos del servicio antes de inicializar el gráfico.Eso se vería así:
Modelo:
<canvas *ngIf="loaded" baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>Componente:
loaded = false; getData(){ this.dataService.getData().subscribe(data => { this.resultData = data; this.barChartLabels = this.resultData.map(item => item.label); this.barChartData = this.resultData.map(item => item.data); this.loaded = true; } }Aquí hay un PLUNKER
barChartData y barCharLabels para que pueda echarle un vistazo?Aquí hay un plunker que funciona para su ejemplo, pero con datos codificados: PLUNKER
El gráfico ng2 está utilizando ngOnChanges internamente para detectar cambios en sus datos de entrada. Esto significa que modificar las matrices que ha ingresado no provocará un cambio. Y dado que su matriz barChartLabels y barChartData ya se inicializaron como matrices vacías, eso es lo que usará el gráfico.
Lo que deberá hacer para activar ngOnChanges es cambiar las instancias reales de barChartLabels y barChartData cuando reciba nuevos datos.
Reemplace esto dentro de su método getData :
this.result.forEach( item => { this.barChartLabels.push(item.label); this.barChartData.push(item.dataInfo); })Con algo como esto:
this.barChartLabels = this.result.map(item => item.label); this.barChartDatat = this.result.map(item => item.dataInfo);