“未定义”将出现在react-chartjs中的我的条形图中

Question

我使用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)',
                    },
                ],
            };

我将把它作为一个属性传递给我的组件，并返回一个条形图，如下

<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}
 />

但我得到了以下结果

​

我不知道为什么它会出现在图表中间的“未定义”位置。你有什么想法吗？

Answer 1

我按如下方式解决了这个问题。在Bar组件中，我做了以下更改

<Bar
      data={{labels: [...this.props.labels],
             text: this.props.message,
             datasets: this.props.data
                            }}

我没有将chartData作为属性传递给Bar组件，而是将chartData.labels和chartData.datasets作为属性传递。