javascript - json ファイルから chart.js のラベルとデータセットにデータを渡すことができません

Question

JSON データを外部から読み込んで、データセットとラベルに渡そうとしています。

サーバーを起動すると、開発者向けオプションで呼び出されているデータが表示されますが、棒グラフには反映されません。

fetch 関数を使用して API を呼び出してみましたが、それをラベル (chart.js の X 軸を表す) とデータセット (chart.js の Y 軸を表す) に呼び出す方法がわかりません。

また、配列データの呼び出し方がわかりません。bar のすべてのプロパティを含むチャートを作成した別のチャート ファイルに chartData を呼び出し、小道具を使用してこの 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;