[英]Unable to display data in Bar Chart using react-chart-2
I am trying to use react-chartjs-2
the React wrapper for chart.js
.我正在尝试使用
react-chartjs-2
的 React 包装器chart.js
。 I am not sure why I am unable to display a Bar Chart.我不确定为什么我无法显示条形图。 It might be how I'm setting the state for the data prop.
这可能是我为数据道具设置 state 的方式。 My data that is returned from the API I want to display in the chart is in this format:
我想在图表中显示的从 API 返回的数据采用以下格式:
[{packets: 14132, bytes: 743572434}, {packets: 10848, bytes: 824102247}, {packets: 7412, bytes: 1391125317}, {packets: 3978, bytes: 9107974}, ... , {packets: 4228, bytes: 8781508}]
I want to update the data prop in my barchart state with this but am not sure if I'm doing it right.我想用这个更新我的条形图 state 中的数据道具,但不确定我是否做得对。 When I console.log
this.state.barchart.datasets.data
in the render()
it will initially comes up as an empty array, and then it gets filled with the appropriate data.当我在
render()
中 console.log this.state.barchart.datasets.data
时,它最初会作为一个空数组出现,然后填充适当的数据。 When I log this.state.barchart.labels
it always comes up with the expected labels.当我记录
this.state.barchart.labels
时,它总是会出现预期的标签。 Since the labels
is getting set but the data
isn't, I'm not sure what the problem is.由于
labels
已设置但data
未设置,因此我不确定问题出在哪里。 I also don't know if I'm setting the conditional to display the Bar Chart itself because sometimes this.state.barchart.datasets.data.length
throws an error: TypeError: Cannot read property 'length' of undefined
.我也不知道我是否设置了条件来显示条形图本身,因为有时
this.state.barchart.datasets.data.length
会引发错误: TypeError: Cannot read property 'length' of undefined
。
Here is my component:这是我的组件:
class Devices extends React.Component {
constructor(props) {
super(props);
this.state = {
barchart: {
labels: [],
datasets: [
{
label: "byte count",
backgroundColor: "rgba(75,192,192,1)",
borderColor: "rgba(0,102,204,1)",
borderWidth: 2,
data: [],
},
],
}
}
componentDidMount(){
all_hours = ["12:00 am", "1:00 am " ... "12:00 pm"]
fetch(API_URL)
.catch((error) => console.error("Error: ", error))
.then((data) => {
var barchart = {...this.state.barchart}
barchart.labels = all_hours // update the labels
barchart.datasets.data = data.map(x => { return x["bytes"]}) // update the data
this.setState({barchart})
})
render(){
return(
<div className="Line">
{typeof(this.state.barchart.datasets.data) !== "undefined"
&& this.state.barchart.datasets.data.length > 0? (
<Bar
data = {this.state.barchart}
options={{
title: {
display: true,
text: "Total Byte Count Per Hour",
fontSize: 20,
},
legend: {
display: true,
position: "right",
},
}}
/>
) : (
<div>Loading...</div>
)}
</div>
)
}
}
The problem is that you're adding the data at the wrong place.问题是您在错误的位置添加数据。
barchart.datasets.data = data.map(x => { return x["bytes"]})
barchart.datasets
is an array that contains a single dataset in your case. barchart.datasets
是一个数组,在您的案例中包含单个数据集。 Therefore, this should be rewritten as follows:因此,这应该改写如下:
barchart.datasets[0].data = data.map(x => { return x["bytes"]})
This can be simplified in the following way:这可以通过以下方式简化:
barchart.datasets[0].data = data.map(x => x["bytes"])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.