javascript - highcharts-react 甘特图 : get mouse coordinates from mouse-over

Question

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

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

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

两者都将工具提示放在了错误的位置。是否有我遗漏的偏移量？

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