Recharts：如何在同一X轴（日期）上展示多个Y值

要实现同一日期对应多个Y值且折线完整连接所有点的需求，核心思路是预处理原始数据集，将同一日期下的多个Y值拆分为独立的数据条目，让Recharts的Line组件能按顺序连接所有节点。

步骤1：预处理数据 #

把原始的「单日期多Y值」结构，转换为「每个Y值对应一条数据」的扁平结构，确保每个数据条目包含日期（X轴字段）和单个Y值。

示例处理函数：

const processData = (rawData) => {
  return rawData.flatMap(item => {
    return item.values.map(val => ({
      date: item.date,
      value: val
    }));
  });
};

步骤2：渲染折线图 #

使用处理后的扁平数据渲染折线图，X轴绑定date字段，Y轴绑定value字段，折线会自动按数据顺序连接所有点——先遍历完当日的所有Y值点，再延伸至下一个日期的点。

完整组件示例：

import { LineChart, Line, XAxis, YAxis, Tooltip } from 'recharts';

// 原始数据集
const RawData = [
  { date: '2024-05-01', values: [12, 25, 18] },
  { date: '2024-05-02', values: [22, 19] },
  { date: '2024-05-03', values: [30, 27, 21] }
];

const MultiValueLineChart = () => {
  const processedData = processData(RawData);

  return (
    <LineChart width={600} height={300} data={processedData}>
      <XAxis dataKey="date" />
      <YAxis />
      <Tooltip />
      {/* type="monotone" 保证折线平滑过渡，也可改为"linear"用直线连接 */}
      <Line type="monotone" dataKey="value" stroke="#8884d8" activeDot={{ r: 8 }} />
    </LineChart>
  );
};

export default MultiValueLineChart;

为什么不直接用dataKey的函数形式？ #

Recharts的Line组件中，dataKey的函数形式仅用于从单个数据条目中提取单个值，无法处理一个条目对应多个Y值的场景。因此预处理数据是最可靠的方案，既能满足需求，也符合Recharts的渲染逻辑。

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