使用Angular 2，chart.js和json數據的天氣圖

Question

使用我從服務收到的天氣信息，我試圖通過chart.js創建圖。

我將圖表導入到我的項目中，並且我可以使用靜態數據，但我無法使用從json獲取的數據。

什麼，我想目前看起來是這樣的：

getForeCast() 
{ 
    this.weatherService.getForecastByCityName(this.searchString) 
     .subscribe(response => 
     { 
      this.lineChartData = response.list.main.temp; 
      this.lineChartLabels = response.list.dt; 
     }) 
} 

//LineChart 
public lineChartData: Array<any> 
public lineChartLabels: Array<any> 

中的getForecast（）在ngOnInit

被激活

的信息，我從JSON收到看起來是這樣的：

{ 
    "cod": "200", 
    "message": 0.0054, 
    "cnt": 35, 
    "list": [ 
     { 
      "dt": 1498748400, 
      "main": { 
       "temp": 21.87, 
       "temp_min": 21.25, 
       "temp_max": 21.87, 
       "pressure": 1006.93, 
       "sea_level": 1009.32, 
       "grnd_level": 1006.93, 
       "humidity": 62, 
       "temp_kf": 0.62 
      }, 
      "weather": [ 
       { 
        "id": 803, 
        "main": "Clouds", 
        "description": "broken clouds", 
        "icon": "04d" 
       } 
      ], 
      "clouds": { 
       "all": 56 
      }, 
      "wind": { 
       "speed": 6.81, 
       "deg": 227.001 
      }, 
      "rain": {}, 
      "sys": { 
       "pod": "d" 
      }, 
      "dt_txt": "2017-06-29 15:00:00" 
     }, 

如果我使用信息在表格中顯示它，它可以工作，但是我無法讓它在圖表中工作。

Answer 1

看圖表的update()方法。也許你需要在更新數據後觸發它，以便圖表重新呈現。