如何在Recharts LineChart中展示带日期与时间戳的结构化数据集

首先，Recharts的LineChart组件要求传入的data是扁平的对象数组，而你当前的数据集是按日期分组的嵌套结构，所以第一步需要把数据打平成符合要求的格式，之后再配置X轴处理时间戳即可。

步骤1：转换数据集结构 #

你可以通过Object.values()提取所有日期对应的数组，再用Array.flat()把嵌套数组打平成一维数组，这样每个元素都是独立的数据点：

// 在组件内部处理数据
const flattenedData = Object.values(Data).flat();

转换后的数据结构会是每个元素对应单个时间点的记录：

[
  {created: 1601820360, magic: -0.1, magnitude: 0.1, createdDay: "2020-10-05"},
  {created: 1601820365, magic: -0.8, magnitude: 0.8, createdDay: "2020-10-05"},
  // ... 所有其他数据点
]

步骤2：修改LineChart组件适配数据 #

接下来更新你的组件，使用转换后的扁平数据，同时配置X轴将时间戳格式化为可读的日期，优化显示效果：

export default function LineGraphs({ Data }) {
  // 转换嵌套数据为扁平数组
  const flattenedData = Object.values(Data).flat();

  // 定义时间戳转可读日期的格式化函数
  const formatTimestamp = (timestamp) => {
    // 注意：你的created是秒级时间戳，需要乘1000转为Date支持的毫秒级
    return new Date(timestamp * 1000).toLocaleString();
  };

  return (
    <div>
      <h4>A demo of synchronized AreaCharts</h4>
      <LineChart 
        width={500} 
        height={300} // 调高高度提升图表可读性
        data={flattenedData} 
        syncId="anyId" 
        margin={{ top: 10, right: 30, left: 0, bottom: 40 }} // 增加底部边距防止X轴标签被截断
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis 
          dataKey="created" 
          tickFormatter={formatTimestamp}
          angle={-45} // 旋转X轴标签避免文本重叠
          textAnchor="end"
        />
        <YAxis />
        <Tooltip 
          labelFormatter={(label) => formatTimestamp(label)} // Tooltip中显示格式化后的日期
        />
        <Line type="monotone" dataKey="magic" stroke="#8884d8" fill="#8884d8" />
      </LineChart>
    </div>
  );
}

额外提示（适配后续日期过滤需求） #

如果之后要添加日期过滤功能，直接基于转换后的flattenedData数组筛选即可，比如按日期范围或指定日期筛选：

// 示例：筛选2020年10月5日的数据
const filteredData = flattenedData.filter(item => item.createdDay === "2020-10-05");

// 示例：筛选某个时间区间内的数据（比如2020-10-01到2020-10-10）
const startTimestamp = new Date("2020-10-01").getTime() / 1000;
const endTimestamp = new Date("2020-10-10").getTime() / 1000;
const filteredData = flattenedData.filter(item => item.created >= startTimestamp && item.created <= endTimestamp);

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