“未定義”將出現在我的 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 作為屬性傳遞。