"undefined " 将出现在我在 react-chartjs 中的条形图中
the "undefined " will appear in my Bar chart in react-chartjs
我使用 react-chartjs-2 创建条形图。我有如下数据:
const chartData = {
labels: ['Dealer1', 'Dealer2', 'Dealer3', 'Dealer4', 'Dealer5', 'Dealer6'],
datasets: [
{
label: 'Ongoing',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgb(255, 99, 132)',
},
{
label: 'Stopped',
data: [2, 3, 20, 5, 1, 4],
backgroundColor: 'rgb(54, 162, 235)',
},
{
label: 'Done',
data: [3, 10, 13, 15, 22, 30],
backgroundColor: 'rgb(75, 192, 192)',
},
],
};
我会将它作为 属性 传递给我的组件,然后我将 return 条形图如下
<div className={`${styles.printReport}`}>
<React.Fragment>
<Layout.Row style={{ justifyContent: "center" }}>
<Headline headlineType="h2">{this.props.title}</Headline>
</Layout.Row>
<Layout.Row style={{ justifyContent: "center" }}>
<div style={{ display: 'block', height: 500, width: '95%' }}>
<Bar
data={
this.props.data
}
options={options}
height={500}
width={1000}
/>
但我有以下结果
我不知道为什么它在图表中间出现“未定义”。
你有什么想法吗?
我解决了如下问题。在 Bar 组件中,我做了以下更改
<Bar
data={{labels: [...this.props.labels],
text: this.props.message,
datasets: this.props.data
}}
我没有将 chartData 传递给 Bar 组件,而是将 chartData.labels 和 chartData.datasets 作为属性传递。
我使用 react-chartjs-2 创建条形图。我有如下数据:
const chartData = {
labels: ['Dealer1', 'Dealer2', 'Dealer3', 'Dealer4', 'Dealer5', 'Dealer6'],
datasets: [
{
label: 'Ongoing',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgb(255, 99, 132)',
},
{
label: 'Stopped',
data: [2, 3, 20, 5, 1, 4],
backgroundColor: 'rgb(54, 162, 235)',
},
{
label: 'Done',
data: [3, 10, 13, 15, 22, 30],
backgroundColor: 'rgb(75, 192, 192)',
},
],
};
我会将它作为 属性 传递给我的组件,然后我将 return 条形图如下
<div className={`${styles.printReport}`}>
<React.Fragment>
<Layout.Row style={{ justifyContent: "center" }}>
<Headline headlineType="h2">{this.props.title}</Headline>
</Layout.Row>
<Layout.Row style={{ justifyContent: "center" }}>
<div style={{ display: 'block', height: 500, width: '95%' }}>
<Bar
data={
this.props.data
}
options={options}
height={500}
width={1000}
/>
但我有以下结果
我不知道为什么它在图表中间出现“未定义”。 你有什么想法吗?
我解决了如下问题。在 Bar 组件中,我做了以下更改
<Bar
data={{labels: [...this.props.labels],
text: this.props.message,
datasets: this.props.data
}}
我没有将 chartData 传递给 Bar 组件,而是将 chartData.labels 和 chartData.datasets 作为属性传递。