如何获取Recharts中AreaChart数据点坐标？Tooltip定位求助

• 核心思路：默认Tooltip会跟随鼠标坐标移动，要实现固定在数据点与网格线交点正上方的效果，需要手动计算定位坐标，忽略鼠标的Y轴位置，仅基于数据点的X坐标和网格线的Y轴位置来设置Tooltip的位置。

• 具体实现步骤：

  1. 利用Tooltip组件的position属性传入自定义定位函数，该函数会接收active（是否激活）、coordinate（鼠标坐标）、payload（当前触发的数据点集合）等参数。
  2. 在定位函数中，当存在有效数据点时，提取数据点的X坐标，同时固定Y坐标到网格线上方的目标位置：

     const customTooltipPosition = (active, coordinate, payload) => {
       if (!active || !payload.length) return { x: 0, y: 0 };
       // 取第一个数据点的X坐标，确保Tooltip对齐数据点
       const targetX = payload[0].x;
       // 固定Y坐标为网格线上方的固定位置，可根据实际布局调整数值
       const targetY = 20;
       return { x: targetX, y: targetY };
     };
     

  3. 将自定义定位函数绑定到Tooltip组件：

     <AreaChart data={chartData}>
       {/* 其他图表元素（坐标轴、面积区域等） */}
       <Tooltip 
         position={customTooltipPosition} 
         content={<CustomTooltipContent />} 
       />
     </AreaChart>
     

  4. 若需要更精准的网格线对齐，可通过图表Ref获取Y轴比例尺，计算数据值对应的网格线Y坐标后再向上偏移：

     const chartRef = useRef(null);
     const customTooltipPosition = (active, coordinate, payload) => {
       if (!active || !payload.length || !chartRef.current) return { x: 0, y: 0 };
       const { yScale } = chartRef.current;
       const dataValue = payload[0].value;
       // 计算数据值对应的网格线Y坐标，向上偏移20px作为Tooltip位置
       const targetY = yScale(dataValue) - 20;
       const targetX = payload[0].x;
       return { x: targetX, y: targetY };
     };
     
     <AreaChart ref={chartRef} data={chartData}>
       {/* ... */}
     </AreaChart>
     

• 注意事项：

  • 确保自定义Tooltip的样式中仅使用position: absolute定位，避免干扰计算好的坐标。
  • 若图表为响应式布局，无需额外处理，Recharts会自动适配窗口变化重新计算坐标。

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