ChartistJS Angular2 - tableau rendu seulement après la fenêtre de redimensionnement

Question

Bon après-midi,

J'essaie de rendre un graphique à l'aide ChartistJS

Ce qui est étrange est que si je redimensionnez la fenêtre mes tableaux affiche des données.

Ceci suggère que je rends le graphique avec des données incomplètes.

Actuellement, j'utilise mon service API pour obtenir mes données. J'ai trouvé ce lien qui ressemble à un problème résolu similaire mais qui a vraiment du mal à l'implémenter.

enter link description here

Ci-dessous mon élément

J'aimerais votre aide ici s'il vous plaît

Merci

GWS

chartistJs.component.ts

import { Component, ViewEncapsulation, 
 
    ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; 
 
import { ChartistJsService } from './chartistJs.service'; 
 
import { PortfolioReturns } from './returns-interface'; 
 
import { BaThemeConfigProvider } from '../../../../theme'; 
 

 
@Component({ 
 
    selector: 'chartist-js', 
 
    encapsulation: ViewEncapsulation.None, 
 
    styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')], 
 
    template: require('./chartistJs.html'), 
 
    providers: [ ChartistJsService ] 
 
}) 
 

 
export class ChartistJs { 
 
    
 
    errorMessage: string; 
 
    returns: PortfolioReturns[]; 
 
    arr = []; 
 
    seriesdata = []; 
 
    lablesdata = []; 
 
    isDataAvailable : boolean = true; 
 

 
    data = { 
 
    simpleLineOptions: {}, 
 
    simpleLineData: {} 
 
    }; 
 

 
    constructor(private _chartistJsService: ChartistJsService, 
 
    private _baConfig: BaThemeConfigProvider, 
 
    private _cdRef: ChangeDetectorRef) { 
 
    } 
 

 
    ngOnInit() {  
 
    this.ChartistChart(); 
 
    } 
 

 
ChartistChart() { 
 

 
let chartdata = { 
 
    labels: this.getlablesdata(), 
 
    series: [ this.getseriesdata(), 
 
    ] 
 
}; 
 

 
this.data = { 
 
    simpleLineOptions: { 
 
     color: this._baConfig.get().colors.defaultText, 
 
     fullWidth: true, 
 
     height: '300px', 
 
     chartPadding: { 
 
     right: 40 
 
     } 
 
    }, 
 
    simpleLineData: chartdata 
 
    }; 
 
} 
 

 
getseriesdata() { 
 
    this._chartistJsService.getReturns() 
 
      .subscribe((res: PortfolioReturns[]) => { 
 
       this.returns = res; 
 
       for (let i = 0; i < this.returns.length; ++i) { 
 
        this.seriesdata.push(this.returns[i].logReturnGross.toString()); 
 
    }}); 
 
    return this.seriesdata; 
 
    } 
 

 
getlablesdata() { 
 
    this._chartistJsService.getReturns() 
 
      .subscribe((res: PortfolioReturns[]) => { 
 
       this.returns = res; 
 
       for (let i = 0; i < this.returns.length; ++i) { 
 
        this.lablesdata.push(this.returns[i].performanceDate); 
 
        }}) ; 
 
    return this.lablesdata; 
 
    } 
 

 

 
    getResponsive(padding, offset) { 
 
    return this._chartistJsService.getResponsive(padding, offset); 
 
    } 
 

 
}

Answer 1

le problème a été résolu par .subscribe après mon Http Get

ChartistChart() { 
    this._chartistJsService.getReturns() 
     .subscribe((res: PortfolioReturns[]) => { 
      this.returns = res; 
      for (let i = 0; i < this.returns.length; ++i) { 
       this.seriesdata.push(this.returns[i].logReturnGross); 
       this.lablesdata.push(this.returns[i].performanceDate.toString()); 
       }; 
       this.data = { 
       simpleLineOptions: { 
        color: this._baConfig.get().colors.defaultText, 
        fullWidth: true, 
        height: '300px', 
        chartPadding: { 
        right: 40 
        } 
       }, 
       simpleLineData: { 
        labels: this.lablesdata, 
        series: [ this.seriesdata ] 
       } 
       }; 
      }); 
     }