无法将数据从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

希望能帮助到你！