无法将数据从 json 文件传递到 chart.js 中的标签和数据集
Unable to pass on data from json file to labels and datasets in chart.js
我正在尝试从外部加载 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;
有点难以理解你的意思,但据我了解,你想要:
y - 数据集
x - 类别
并且所有数据集都显示 spectra
属性。
如果我没理解错的话,问题是你没有将属性映射到相应的字段:例如:labels: [responseJson.keywordData.category]
,应该更像labels: responseJson.keywordData.map(k => k.category)
,因为你不能显式声明所有字段都已自动映射和循环。
spectra
属性 也是如此,你必须从响应中映射每个对象并提取 spectra
属性(你现在只能一个值,因为只有一个spectra
,以后要是多了就得map)
我正在添加一个 codesandbox
示例
(前面的一点注意事项:
对于 fetch 我使用了 axios (我自己的偏好,没有区别)
(你用的是 React,所以我导入了 react-chartjs-2
)
代码沙盒 Link:https://codesandbox.io/s/qk0r930p89
希望对您有所帮助!
我正在尝试从外部加载 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;
有点难以理解你的意思,但据我了解,你想要:
y - 数据集 x - 类别
并且所有数据集都显示 spectra
属性。
如果我没理解错的话,问题是你没有将属性映射到相应的字段:例如:labels: [responseJson.keywordData.category]
,应该更像labels: responseJson.keywordData.map(k => k.category)
,因为你不能显式声明所有字段都已自动映射和循环。
spectra
属性 也是如此,你必须从响应中映射每个对象并提取 spectra
属性(你现在只能一个值,因为只有一个spectra
,以后要是多了就得map)
我正在添加一个 codesandbox
示例
(前面的一点注意事项:
对于 fetch 我使用了 axios (我自己的偏好,没有区别)
(你用的是 React,所以我导入了 react-chartjs-2
)
代码沙盒 Link:https://codesandbox.io/s/qk0r930p89
希望对您有所帮助!