通过迭代返回时，Recharts Stacked Bar Graph 中的条形项目不呈现

问题描述

我想遍历我的数据对象数组并为每个属性返回一个 Bar 项，但由于某种原因尝试通过映射时不会发生渲染。

这是我的代码片段：

const staticData = [{name: '0-30 days','To Do': 4000,'Doing': 2003},{name: '31-60 days','To Do': 1000,'Doing': 1200},{name: '61-90 days','To Do': 2500,'Doing': 1500},{name: '91+ days','Doing': 2400}];

<BarChart width={340} height={180} data={staticData}
                    margin={{top: 5,right: 30,left: -30,bottom: 0}}>
                    <Cartesiangrid strokeDasharray="3 3 "/>
                    <XAxis dataKey="name"  interval={0} tick={{fontSize: 8}}/>
                    <YAxis  tick={{fontSize: 8}} allowDataOverflow={true}/>
                    <Tooltip/>
                    {
                        staticData.map((element) => {
                            Object.keys(element).map((s) => {
                                if (s!=="name"){
                                    return (
                                        <Bar barSize={30} dataKey={s} name={s} key={s} stackId="a" fill="#449fdb" />
                                    );
                                }
                                return "";
                            });
                            return "";
                        })
                    }
                </BarChart> 

如果我将值输出到控制台，则表明它们正在被拾取：

如果我用这种方法替换迭代，它会起作用：

<Bar barSize={30} dataKey="To Do" stackId="a" fill="#449fdb" />
<Bar barSize={30} dataKey="Doing" stackId="a"fill="#E67E23" />

我需要迭代方法的原因是因为在实践中我将从 API 接收数据，并且它的 DataKey 属性会有所不同。

我做错了什么？

谢谢。

解决方法

您需要做的是遍历每个堆叠条应包含的段的键/标签/名称；在你的情况下“做”和“要做”。如果您按照建议循环遍历数据，则会以相反的角度对其进行布局，如果稍后要包含 <Legend />，它将显示日期持续时间范围，这些范围已经是标签在图表中的轴上，而不是首先需要解释的内容，即堆叠条形图中的彩色段。

您的 API 应该以最佳方式返回某种引用，以便您事先了解所有不同的数据点——或者，您可以先遍历数据并收集当前数据集中所有已知的数据点标签：

const labels = new Set(data.flatMap(({ name,...labels }) => Object.keys(labels)))
// -> ['Doing','To Do']

然后循环遍历这个标签数组，并为每个标签渲染一个 <Bar />：

{labels.map((label,index) => (
    <Bar
        dataKey={label}
        stackId="x"
        fill={colors[index]}
        key={label} />
))}

……差不多就是这样。 Recharts 现在将使用魔法生成所有堆栈段。