無法將數據從json文件傳遞到chart.js中的標簽和數據集

Question

我正在嘗試從外部加載JSON數據，並將其傳遞給數據集和標簽。

當我啟動服務器時，在開發人員選項中看到了正在調用的數據，但是在條形圖中卻沒有反映出來。

我嘗試使用fetch函數調用我的API，但是我不知道如何將其調用到標簽（在chart.js中代表X軸）和數據集（在chart.js中代表Y軸）中。

而且，我不知道如何調用數組數據。 我正在將chartData調用到另一個圖表文件中，在其中創建了具有bar所有屬性的圖表，並嘗試使用props將此chartData調用到我的條形圖數據中。

請糾正我做錯了的地方。 下面是我的代碼。

getChartData(){
    //Ajax calls here
    return fetch('https://api.myjson.com/bins/l5pw3')
             .then((response)=> response.json())
             .then((responseJson) => {
                 this.setState({
                     //chartData:responseJson.keywordData
                     chartData: {
                         labels: [responseJson.keywordData.category],
                         datasets:[
                             {
                                 label: 'spectra',
                                 data [responseJson.keywordData.noOfSpectra],
                                 backgroundColor:[
                                      'rgba(255, 99, 132, 0.6)'
                                 ]
                             }
                          ]
                      }

                  });
                  console.log(this.state.chartData)
              });
}

render() {
     return (
           <div className="App">
            <Chart chartData={this.state.chartData} />
           </div>
     );
}

export default App;

Answer 1

理解您的意思有點困難，但是據我了解，您想要：

y-數據集x-類別

並且所有數據集都顯示spectra屬性。

如果我正確理解的話，問題是您沒有將屬性映射到相應的字段：例如： labels: [responseJson.keywordData.category] ，應該更像labels: responseJson.keywordData.map(k => k.category) ，因為您不能明確聲明所有字段都已自動映射和循環。

spectra屬性也是如此，然后您必須從響應中映射每個對象並提取spectra屬性（您現在只能取一個值，因為只有一個spectra ，但是將來，如果有更多spectra ，您可以將需要映射）

我添加了一個codesandbox示例（向前寫一些注釋：為了獲取，我使用了axios（我自己的喜好，沒有區別））（您正在使用react，所以我導入了react-chartjs-2 ）

代碼Sanbox鏈接： https ：//codesandbox.io/s/qk0r930p89

希望能幫助到你！