高图表反应甘特图:从鼠标悬停获取鼠标坐标

Question

我正在使用官方的 highcharts 包装器让 react 生成甘特图。我正在尝试从鼠标悬停事件中获取鼠标坐标并将其用于自定义工具提示，但坐标不精确。

例：https://stackblitz.com/edit/react-c5mivs

该事件返回 plotX 和 plotY，据我了解，它们应该是鼠标坐标。它还返回一个名为 tooltipPos 的数组，我猜它是本机工具提示的坐标。

两者都将工具提示放在错误的位置。我缺少偏移量吗？

Answer 1

坐标

plotX和plotY与绘图面积相关。如果要与图表容器建立关系，则需要添加plotLeft值并plotTop值：

handleTooltip = (event) => {
  const chart = event.target.series.chart;
  this.setState({
    isVisible: true,
    tooltipPosX: chart.plotLeft + event.target.tooltipPos[0],
    tooltipPosY: chart.plotTop + event.target.tooltipPos[1]
  })
};

现场演示：https://stackblitz.com/edit/react-jfehmb?file=index.js