Recharts BarChart 问题：按日期分渠道展示消费数据异常

问题描述 #

首次使用Recharts库，想要实现按日期分渠道展示消费数据，但所有渠道的所有日期数据都集中显示在02.01日期上，无法在每个日期下展示两个渠道的数据。

服务器返回数据格式 #

data.channel_consumption_detail = [
  {
    channel_number: 1,
    consumption: 1231,
    date: 100000,
    id_channel: "сb-1312"
  },
  {
    channel_number: 1,
    consumption: 1234,
    date: 200000,
    id_channel: "сb-1312",
  },
  {
    channel_number: 1,
    consumption: 1234,
    date: 300000,
    id_channel: "сb-1312"
  },
  {
    channel_number: 2,
    consumption: 800,
    date: 100000,
    id_channel: "сb-1314"
  },
  {
    channel_number: 2,
    consumption: 823,
    date: 200000,
    id_channel: "сb-1314"
  },
  {
    channel_number: 2,
    consumption: 1233,
    date: 300000,
    id_channel: "сb-1314"
  }
]

日期为Unix时间戳，已完成格式转换（对应1月2日、3日、4日）。

尝试的代码 #

<ResponsiveContainer width="100%" height={385}>
  <BarChart height={300} data={data?.channel_consumption_detail}>
    <CartesianGrid vertical={false} />
    <XAxis
      key="channel_number"
      dataKey="date"
      tickFormatter={(tick) => convertTimestampToDate(tick, 'dd.MM')}
      allowDuplicatedCategory={false}
    />
    <YAxis dataKey="consumption" />
    {data?.channel_consumption_detail.map((el: any, i: any) => (
      <Bar data={[el]} dataKey="consumption" key={el.channel_number[i]}></Bar>
    ))}
  </BarChart>
</ResponsiveContainer>

问题原因 #

1. 数据结构不匹配：Recharts的分组柱状图要求每个数据项包含所有系列（渠道）的数值，当前扁平数组的每个项仅对应单个渠道的消费值，无法支持并列展示。
2. 错误生成Bar组件：循环原始数据的每个元素生成独立Bar，导致每个数据点都成为单独系列，而非按渠道分组。
3. XAxis配置冲突：allowDuplicatedCategory={false}会合并相同日期的分类，直接把所有数据压缩到第一个出现的日期上。

解决方案 #

步骤1：转换数据结构 #

先将扁平数组转换为按日期分组的结构，每个日期项包含两个渠道的消费值：

// 数据转换函数
const transformData = (rawData) => {
  const dateMap = new Map();
  
  rawData.forEach(item => {
    const dateKey = item.date;
    if (!dateMap.has(dateKey)) {
      dateMap.set(dateKey, { date: dateKey });
    }
    // 按渠道编号命名字段，方便后续对应Bar组件
    dateMap.get(dateKey)[`channel_${item.channel_number}`] = item.consumption;
  });
  
  return Array.from(dateMap.values());
};

// 生成转换后的数据
const transformedData = transformData(data.channel_consumption_detail);

转换后的数据示例：

[
  { date: 100000, channel_1: 1231, channel_2: 800 },
  { date: 200000, channel_1: 1234, channel_2: 823 },
  { date: 300000, channel_1: 1234, channel_2: 1233 }
]

步骤2：修改Recharts组件代码 #

使用转换后的数据，为每个渠道单独配置Bar组件：

<ResponsiveContainer width="100%" height={385}>
  <BarChart height={300} data={transformedData}>
    <CartesianGrid vertical={false} />
    <XAxis
      dataKey="date"
      tickFormatter={(tick) => convertTimestampToDate(tick, 'dd.MM')}
    />
    <YAxis />
    <Tooltip />
    <Legend />
    {/* 渠道1的柱状条 */}
    <Bar dataKey="channel_1" name="渠道1" fill="#8884d8" />
    {/* 渠道2的柱状条 */}
    <Bar dataKey="channel_2" name="渠道2" fill="#82ca9d" />
  </BarChart>
</ResponsiveContainer>

说明 #

• 转换后的数据让每个日期项包含所有渠道的消费值，Recharts会自动将同一日期下的不同渠道柱状条并列展示。
• 移除了allowDuplicatedCategory={false}，因为转换后每个日期在数据中仅出现一次，无需合并。
• 添加Tooltip和Legend提升图表可读性，样式可根据需求自行调整。

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