0

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

1 回答 1

1

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

y - 数据集 x - 类别

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

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

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

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

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

希望能帮助到你！

于 2017-12-24T09:45:02.467 回答