如何在Recharts的LineChart中实现多折线实时数据展示并自动滚动更新

你现在的代码只实现了单条折线的渲染逻辑，还没处理多条折线的维护和动态更新需求。我帮你调整代码，实现"最多保留50条折线，满额后移除最早的一条，再添加新折线"的功能：

核心问题分析 #

• 当前状态仅存储了单条线的数据，没有维护多条折线的集合
• 数据点缺少x轴标识，导致XAxis无法正常显示刻度
• 硬编码了单个<Line>组件，无法动态生成多条折线

修改后的完整代码 #

import { LineChart, XAxis, YAxis, Legend, Line, CartesianGrid, Tooltip } from "recharts";
import { useState, useEffect } from "react";

const ShowGraph = ({ graphData }) => {
  // 维护所有折线的数据集合，每个元素对应一条线的48个数据点
  const [lineDataCollection, setLineDataCollection] = useState([]);

  // 生成折线区分色（可自定义更丰富的调色板）
  const getLineColor = (index) => {
    const colorPalette = ['#8884d8', '#82ca9d', '#ffc658', '#ff8042', '#0088fe', '#8800ff'];
    return colorPalette[index % colorPalette.length];
  };

  useEffect(() => {
    // 跳过无效数据
    if (!graphData || graphData.length !== 48) return;

    // 将原始数组转换为Recharts兼容格式：每个点包含x轴索引和当前线的数值
    const newLine = graphData.map((value, idx) => ({
      x: idx + 1, // 用1-48的索引作为x轴刻度
      [`line${lineDataCollection.length}`]: Number(value) // 给每条线分配唯一的dataKey
    }));

    // 更新折线集合：超过50条时移除最早的一条，否则直接添加
    setLineDataCollection(prev => {
      const updated = [...prev, newLine];
      return updated.length > 50 ? updated.slice(1) : updated;
    });
  }, [graphData]);

  // 合并所有折线数据：Recharts要求data是一个数组，每个元素包含所有折线在该x轴点的数值
  const mergedChartData = lineDataCollection.length > 0 
    ? Array.from({ length: 48 }, (_, idx) => {
        return lineDataCollection.reduce((acc, line) => ({ ...acc, ...line[idx] }), {});
      })
    : [];

  return (
    <>
      <LineChart 
        width={1000} 
        height={500} 
        data={mergedChartData} 
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid stroke="#eee" strokeDasharray="7 7" />
        <XAxis dataKey="x" />
        <YAxis />
        <Tooltip />
        {/* 动态生成所有折线组件 */}
        {lineDataCollection.map((_, idx) => (
          <Line 
            key={`line-${idx}`}
            type="monotone" 
            dataKey={`line${idx}`} 
            stroke={getLineColor(idx)}
            strokeWidth={1} // 缩小线宽避免重叠
            dot={false} // 隐藏数据点，优化视觉体验
          />
        ))}
      </LineChart>
    </>
  );
};

export default ShowGraph;

关键修改说明 #

1. 状态结构优化：用lineDataCollection存储所有折线的数据，每个元素对应一条线的48个结构化数据点
2. 数据格式转换：把原始数值数组转换成带x轴索引的对象，给每条线分配唯一的dataKey（如line0、line1）
3. 动态维护折线数量：每次添加新折线后检查集合长度，超过50则移除最早的一条
4. 数据合并处理：将多条折线的数据合并为Recharts要求的格式，确保每个x轴点包含所有折线的数值
5. 动态渲染折线：通过map循环生成<Line>组件，用不同颜色区分每条线，同时关闭点显示避免视觉拥挤

额外优化建议 #

• 1ms的更新频率过高，建议添加节流处理（比如每10ms更新一次），避免图表渲染性能问题
• 可以自定义Tooltip的格式化函数，让实时数据展示更清晰
• 如果需要区分重点折线，可以给特定线条设置更粗的线宽或高亮颜色

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