Recharts柱状图相同name的X轴条目重复，如何合并对应柱形数据？

问题根因 #

Recharts默认将data数组的每一个元素对应为一个X轴条目，你当前的数据源存在两个name为Page A的独立对象，因此会渲染出两个重复的X轴项。要实现相同name下的柱形聚合展示，根据实际展示需求，可选以下两种方案：

方案1：合并同name的数值（累加后展示一组柱形） #

如果你需要把同个Page A的uv、pv值累加后展示，先对数据源做去重聚合处理即可，处理代码示例：

const processedData = Object.values(data.reduce((acc, cur) => {
  if (acc[cur.name]) {
    // 已存在同name的条目，累加数值
    acc[cur.name].uv += cur.uv
    acc[cur.name].pv += cur.pv
  } else {
    // 不存在则新增条目
    acc[cur.name] = {...cur}
  }
  return acc
}, {}))

之后把BarChart的data属性替换成processedData即可，最终只会渲染一个Page A的X轴项，展示累加后的uv、pv柱形。

方案2：同X轴项并列展示多组柱形（不累加数值） #

如果你需要保留两组Page A的原始数值，在同一个X轴刻度下并列展示，处理方式是先把同name的数值映射为新的字段：

const processedData = Object.values(data.reduce((acc, cur) => {
  if (acc[cur.name]) {
    // 同name的第二组数据，映射为uv2、pv2字段
    acc[cur.name].uv2 = cur.uv
    acc[cur.name].pv2 = cur.pv
  } else {
    acc[cur.name] = {...cur}
  }
  return acc
}, {}))

然后修改组件代码，新增对应字段的Bar组件即可：

<BarChart width={730} height={250} data={processedData}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Legend />
  <Bar dataKey="uv" fill="#8884d8" name="第一组uv" />
  <Bar dataKey="pv" fill="#82ca9d" name="第一组pv" />
  <Bar dataKey="uv2" fill="#ffc658" name="第二组uv" />
  <Bar dataKey="pv2" fill="#ff8042" name="第二组pv" />
</BarChart>

如果需要堆叠展示，给对应的Bar组件添加stackId属性即可。

内容的提问来源于stack exchange，提问作者isaac