javascript - “未定义”将出现在我的条形图中 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 作为属性传递。