2017-10-19 4 views
0

füllen Ich versuche, Chartist Daten über API-Aufruf zu laden, obwohl die Daten zurückgegeben werden, aber nicht in Chartisten-Serie geladen.Ich kann Chartist nicht mit Daten von http get (Angular 4)

// Initialize data series 
seriesData: any[] = []; 

// Function to retrieve data from api 
getSeriesData() { 
    this.uid.getSeriesData(this.auth.getCurrentUser()).then(
     data => this.seriesData = data, // This is populated 
     err => console.log(err) 
    ); 
    } 

//ngInit 
ngOnInit() { 
    this.getSeriesData(); 

// Chartist 
const dataDailySalesChart: any = { 
     labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], 
     series: [ 
     this.seriesData // THIS IS ALWAYS EMPTY 
     ] 
    }; 
} 
+0

Natürlich leer es ist, können Sie die Diagrammdaten bauen vor Das Versprechen könnte möglicherweise gelöst worden sein. Tun Sie es innerhalb des Rückrufs, wo Sie diese Daten haben. – jonrsharpe

+0

@jonrsharpe, bitte können Sie mit einem Beispiel helfen. Ich bin neu in diesem Bereich. –

+0

Mögliches Duplikat von [So geben Sie Daten aus einem Versprechen zurück] (https://stackoverflow.com/questions/37533929/how-to-return-data-from-promise) – jonrsharpe

Antwort

1

Sie versuchen, die Diagrammdaten zu bauen, bevor das Versprechen ist resolved.Since getSeriesData asynchron ist, sollten Sie somehting wie dies tun,

getSeriesData() { 
    this.uid.getSeriesData(this.auth.getCurrentUser()).then(
     data => this.seriesData = data, // This is populated 
     this.generateChart(this.seriesData), 
     err => console.log(err) 
    ); 
    } 

ngOnInit() { 
    this.getSeriesData();  
} 

generateChart(chartData:any){ 
     const dataDailySalesChart: any = { 
     labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], 
     series: [ 
     chartData 
     ] 
    }; 
}; 
+0

Danke für die schnelle Antwort. Ihr Beispiel funktioniert, aber ich kann immer noch nicht dataDailySalesChart an diese Variable übergeben, da es in generateChart ist. var dailySalesChart = new Chartist.Line ('# dailySalesChart', dataDailySalesChart, optionsDailySalesChart); –

+0

können Sie einfach die Daten zuweisen – Sajeetharan

+0

Sie sind großartig! Ich danke dir sehr. @jonrsharpe, ich schätze deinen Beitrag. –