Recharts 条形图不显示

问题描述

我在 React 中使用 Recharts 创建了一个图表。 我可以获取图表中的所有值，但未显示。接收数据有问题吗？因为当我在 codeandBox 中尝试时它正在工作。 在图表中，我可以看到数据，但没有条形图。 我该如何解决？

class Bargraph extends Component {
    state = {
        converted: [],labels: []
    };
    componentDidMount() {
        let {data} = this.props;
        console.log(data);
        let converted = this.convertData(data);
        let labels = this.getLabels(data);
        console.log(labels,converted);

        this.setState({
            converted: converted,labels: labels
        });
    }

    convertData(data) {
        let arr = [];
        for (let i = 0; i < data.length; i++) {
            let obj = { month: data[i].month };
            for (let j = 0; j < data[i].commodities.length; j++) {
                let commodity = data[i].commodities[j];
                obj[commodity.name] = commodity.moves;
            }
            arr.push(obj);
        }
        return arr;
    }

    getLabels(data) {
        let arr = [];
        _.each(data,(obj) => {
            arr = arr.concat(obj.commodities);
        });
        let grouped = _.groupBy(arr,"name");
        return Object.keys(grouped);
    }

    render() {
         const colo = [
            "#19a525","#2b7274"
        ];
        return (
            <ResponsiveContainer width={'99%'} height={350}>
                <BarChart
                    width={600}
                    height={300}
                    data={this.state.converted}
                    margin={{}}
                >
                    <Cartesiangrid strokeDasharray="3 3" />
                    <XAxis dataKey="month"/>
                    <YAxis/>
                    <Tooltip/>
                    <Legend/>
                    {this.state.labels.map((label,index) => (
                        <Bar key={index} dataKey={label} fill={colo[index]} />
                    ))}
                </BarChart>
            </ResponsiveContainer>
        );
    }
}

这就是它的样子：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）