Question

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

示例： 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

highcharts-react甘特图：从鼠标悬停获取鼠标坐标

1 个答案: