如何在 point/hoverover 工具提示中添加额外信息

Question

我在我的项目中使用 recharts。我使用的图表是 CustomizedLabelLineChart。我的问题是我为 X 轴使用的值太长，所以我需要将它们从 X 轴上移除，但仍将它们保留在图表悬停工具提示中。怎么做？换句话说，我需要在每个 point/hoverover 工具提示中添加一些额外的数据。

Answer 1

您可以创建一个自定义工具提示组件并将其作为名为 content 的道具传递，这里是一个名为

的自定义工具提示示例

<CustomizedLabelLineChart width={600} height={300} data={data}>
  <XAxis dataKey="name" tick={<CustomAxisTick />} />
  <YAxis />
  <Tooltip content={<CustomTooltip />}/>
  ...
</CustomizedLabelLineChart>

参考：http://recharts.org/en-US/guide/customize

如何在 point/hoverover 工具提示中添加额外信息

how to add extra information in the point/hoverover tooltip

reactjs

recharts