首页 文章

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

提问于
浏览 次
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;
javascript json reactjs chart.js react-chartjs

1 回答

  • 1

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

    y - 数据集x - 类别

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

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

    同样适用于 spectra 属性，你必须从响应中映射每个对象并提取 spectra 属性（你现在只能获取一个值，因为只有一个 spectra ，但将来，如果有更多，你，将要映射）

    我正在添加一个 codesandbox 示例（前进中的一些小注释：for fetch我使用axios（我自己的优先，没有区别）（你使用的是反应，所以我导入 react-chartjs-2 ）

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

    希望能帮助到你！

    回复于

相关问题