[BUG]仪表盘使用统计查看时间点数据的时候悬浮窗跑到左上角且被遮挡

[keleus]

仪表盘使用统计查看时间点数据的时候悬浮窗跑到左上角且被遮挡

如图：

[github-actions]

您好！感谢您报告这个问题。

我已经分析了代码,找到了导致悬浮窗(tooltip)跑到左上角的原因。

问题分析

在 src/app/[locale]/dashboard/_components/statistics/chart.tsx:432 中,ChartTooltip 使用了以下样式:

<ChartTooltip
  cursor={false}
  wrapperStyle={{ transform: "translateY(-100%)", marginTop: "-20px" }}
  // ...
/>

这个 transform: "translateY(-100%)" 设置是为了让 tooltip 显示在鼠标上方,但在某些情况下(特别是图表靠近顶部时)会导致 tooltip 超出容器边界或跑到左上角被遮挡。

建议的解决方案

有几种方法可以解决这个问题:

方案 1:调整 tooltip 定位策略

移除固定的 transform 偏移,让 Recharts 自动处理定位:

<ChartTooltip
  cursor={false}
  position={{ y: 0 }}  // 或者使用 allowEscapeViewBox
  // 移除 wrapperStyle
  content={...}
/>

方案 2:添加边界检测

使用 Recharts 的 allowEscapeViewBox 属性,让 tooltip 在边界处自动调整位置:

<ChartTooltip
  cursor={false}
  allowEscapeViewBox={{ x: false, y: true }}
  wrapperStyle={{ marginTop: "-20px" }}
  content={...}
/>

方案 3:调整容器样式

在 CardContent (chart.tsx:362) 添加 overflow: visible 确保 tooltip 不会被裁剪:

<CardContent className="px-1 sm:p-6 relative overflow-visible">

推荐方案

我建议结合方案 2 + 方案 3,这样既能让 tooltip 自动避开边界,又能确保不被容器遮挡。

---

如果您需要我来实现这个修复,请回复 @claude please fix this,我会立即为您创建修复代码。

🤖 This is an automated response from Claude AI

[ding113]

问题已知。下一个版本会修复。