reactjs - 如何在点/悬停工具提示中添加额外信息

Question

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

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