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

【问题标题】：Unable to pass on data from json file to labels and datasets in chart.js无法将数据从 json 文件传递到 chart.js 中的标签和数据集
【发布时间】：2017-12-21 17:04:40
【问题描述】：

我正在尝试从外部加载 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;

【问题讨论】：

标签： javascript json reactjs chart.js react-chartjs

【解决方案1】：

有点难以理解你的意思，但据我了解，你想要：

y - 数据集 x - 类别

所有数据集都显示spectra 属性。

如果我理解正确，问题是你没有将属性映射到相应的字段：例如：labels: [responseJson.keywordData.category]，应该更像labels: responseJson.keywordData.map(k => k.category)，因为你不能明确声明所有字段都是自动映射和循环。

spectra 属性也是如此，然后您必须从响应中映射每个对象并提取 spectra 属性（您现在只能取一个值，因为只有一个 spectra，但在未来，如果有更多，你将不得不映射）

我正在添加一个codesandboxexample （前面有一点注释：对于 fetch 我使用 axios （我自己的偏好，没有区别）（你用的是 react，所以我导入了react-chartjs-2）

代码Sanbox链接：https://codesandbox.io/s/qk0r930p89

希望对你有帮助！

【讨论】：