High-Chart-реакции Ганта: получить координаты мыши при наведении мыши

Question

Я использую официальную оболочку для хай-чартов для реакции на генерацию диаграммы Ганта.Я пытаюсь получить координаты мыши из события наведения мыши и использовать их для пользовательской подсказки, но координаты неточные.

Пример: 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