React Recharts 提示框无法正常显示数据问题求助

我用Recharts绘制了两条折线，一条展示每日数据，另一条展示季度数据。当前Tooltip只有在直接悬停粉色折线的数据点时才会显示该线的数据，未悬停时显示0值。我希望Tooltip始终显示对应时间点的所有数据，尝试添加filterNull={false}属性但没效果，求解决思路。

现有代码 #

<Tooltip content={renderTooltipContentGeneric} filterNull={false} />

export const renderTooltipContentGeneric = o => {
 const { payload, label } = o
 const total = payload?.reduce((result, entry) => result + entry.value, 0)

 return (
   <div className="customized-tooltip-content-core">
     <div className="list">
       {payload?.map((entry, index) => (
         <div
           className="listItem"
           key={`item-${index}`}
           style={{
             color: entry.color,
             display: 'flex',
             flexDirection: 'row',
             gap: '4px',
           }}
         >
           <div style={{ color: 'var(--white)' }}>{`${moment(label).format(
             'lll'
           )}: `}</div>
           {`${numeral(entry.value).format('0.000 a')} `}
         </div>
       ))}
     </div>
   </div>
 )
}

问题截图 #

解决思路 #

1. 对齐数据源的时间轴

两条折线的数据点时间维度不匹配是核心问题——每日数据有全量日期，而季度数据只有特定日期的点。你需要把季度数据补全到每日维度，没有数据的日期用null填充（不要用0），这样Recharts能识别到该时间点存在对应的数据项，只是值为空。

示例数据结构：

const chartData = [
  { date: '2024-01-01', dailyValue: 150, quarterlyValue: null },
  { date: '2024-01-02', dailyValue: 160, quarterlyValue: null },
  // ...中间日期
  { date: '2024-03-31', dailyValue: 220, quarterlyValue: 5800 },
  // ...后续日期
]

2. 调整Tooltip的核心配置

给Tooltip添加shared={true}属性，强制它显示所有系列的数据，不管当前悬停的是哪条折线。同时保留filterNull={false}确保null值不会被过滤：

<Tooltip content={renderTooltipContentGeneric} filterNull={false} shared={true} />

3. 自定义Tooltip处理null值

在renderTooltipContentGeneric里，判断数据值是否为null，避免显示0或者错误格式，改成显示占位符（比如“-”）：

{`${entry.value !== null ? numeral(entry.value).format('0.000 a') : '-'} `}

4. 检查折线组件的配置

确保两条折线的dataKey对应的数据字段正确，且都使用同一个数据源：

<Line data={chartData} dataKey="dailyValue" stroke="#xxx" />
<Line data={chartData} dataKey="quarterlyValue" stroke="#pink" />

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