2017-10-19 132 views
0

我試圖通過api調用加載chartist數據,雖然數據已返回,但不在chartist系列中加載。無法使用來自http的數據填充Chartist(角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

當然它是空的,你之前建立的圖表數據這個承諾可能已經解決了。在回調中進行,你確實有這些數據。 – jonrsharpe

+0

@jonrsharpe,請你幫助一個例子。我是新來的。 –

+0

[如何從promise返回數據]的可能重複(https://stackoverflow.com/questions/37533929/how-to-return-data-from-promise) – jonrsharpe

回答

1

你正在試圖建立圖表數據之前的承諾是resolved.Since getSeriesData是異步的,你應該做的服用點這樣的,

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

感謝您的及時迴應。你的例子工作,但我仍然不能將dataDailySalesChart傳遞給這個變量,因爲它在裏面的generateChart。 var dailySalesChart = new Chartist.Line('#dailySalesChart',dataDailySalesChart,optionsDailySalesChart); –

+0

你可以分配數據 – Sajeetharan

+0

你太棒了!非常感謝。 @jonrsharpe,我感謝你的貢獻。 –

相關問題