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

Question

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

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

APIを呼び出すためにfetch関数を使用しようとしましたが、ラベル（chart.jsのX軸を表す）とデータセット（グラフのY軸を表す）に呼び出す方法がわかりません。 js）。

また、配列データを呼び出す方法がわかりません。私は、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; 

Answer 1

あなたが何を意味するのか理解するのは少し大変でしたが、私は理解されるように、あなたが望んでいた：

yは - データセット X - カテゴリ

と、すべてのデータセットがspectraプロパティを示しています。

私が正しく理解していれば、問題は対応するフィールドにプロパティをマップしなかったことです。例：labels: [responseJson.keywordData.category]はlabels: responseJson.keywordData.map(k => k.category)のようになります。なぜなら、すべてのフィールドがマップされ、自動的に。

同じことがspectra財産のために、あなたは1つだけspectra、将来的には、そこにいる場合がある原因（あなたが今、一つの値だけを取ることができます応答から各オブジェクトをマップし、spectraプロパティを抽出する必要がありました以上です、あなたは）マップする必要があります

私はcodesandbox例 （前方で少しのノート：私はaxiosを使用フェッチのための （私自身preferance、違いはありません）追加してい （あなたが反応し使用していたが、私はreact-chartjs-2を輸入しました）

コードSanbox Lin k：https://codesandbox.io/s/qk0r930p89

希望します。