“未定义”将出现在 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,20,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}
 />

但我有以下结果

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

解决方法

我解决了如下问题。在 Bar 组件中，我做了以下更改

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

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