时间戳

首页 > 解决方案 > Recharts：将工具提示光标定位在活动点上

reactjs - Recharts：将工具提示光标定位在活动点上

问题描述

我正在使用工具提示创建简单的折线图。有没有办法将我的光标定位在活动点上而不是偏移（下图）。在此处输入图像描述

标签： reactjsd3.jsrecharts

解决方案

很好的问题，ReCharts 文档中的答案绝对不是直截了当的。活动点的 X 和 Y 坐标实际上已经作为道具传递给您的自定义工具提示组件。

因此，如果您在自定义组件中注销道具，您将获得大量信息，其中包括您当前悬停的可视化中的数据点。

const DottedTooltip = (props) => {
console.log(props);
...

您需要通过解构或从 props 访问它来获取所需的位置信息，然后使用它来设置诸如 cx 属性与<circle>svg 或 d 属性之类的东西<path>。

这是我在 LineChart 上实现的虚线光标的示例

const DottedTooltip = ({ points }) => {
  const xPos = points[0].x;

  return (
    <svg viewBox="0 0 509 156" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx={xPos} cy="1" r="1" fill="#919191" />
      <circle cx={xPos} cy="11" r="1" fill="#919191" />
      <circle cx={xPos} cy="21" r="1" fill="#919191" />
      <circle cx={xPos} cy="31" r="1" fill="#919191" />
      <circle cx={xPos} cy="41" r="1" fill="#919191" />
      <circle cx={xPos} cy="51" r="1" fill="#919191" />
      <circle cx={xPos} cy="61" r="1" fill="#919191" />
      <circle cx={xPos} cy="71" r="1" fill="#919191" />
      <circle cx={xPos} cy="81" r="1" fill="#919191" />
      <circle cx={xPos} cy="91" r="1" fill="#919191" />
      <circle cx={xPos} cy="101" r="1" fill="#919191" />
      <circle cx={xPos} cy="111" r="1" fill="#919191" />
      <circle cx={xPos} cy="121" r="1" fill="#919191" />
      <circle cx={xPos} cy="131" r="1" fill="#919191" />
      <circle cx={xPos} cy="141" r="1" fill="#919191" />
    </svg>
  );
};

最后注意：您将要确保将自定义 svg 的 viewBox 属性设置为等于整个图形的尺寸，以确保光标将在整个可视化中呈现。

推荐阅读