Question

我尝试在外部加载JSON数据并将其传递给数据集和标签。

当我启动服务器时，我看到在开发人员选项中调用的数据，但是，条形图中没有反映出这一点。

我尝试使用fetch函数调用我的API，但我不知道如何将其调用到标签（表示chart.js中的X轴）和数据集（表示图表中的Y轴） .js文件）。

而且，我不知道如何调用数组数据。我将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属性（您现在只能获取一个值，因为只有一个{{ 1}}，但在将来，如果还有更多，你将不得不映射）

我正在添加spectra示例（前进中的一点注意事项：为了获取我使用axios（我自己的优先，没有区别）（你使用的是反应，所以我导入了codesandbox）

Code Sanbox Link：https://codesandbox.io/s/qk0r930p89

希望它有所帮助！

无法将数据从json文件传递到chart.js中的标签和数据集

1 个答案: