Всплывающая подсказка Highcharts в прокручиваемых контейнерах с содержимым

Question

У меня есть экземпляр Highcharts, который отображается внутри прокручиваемого контейнера. Параметр tooltip.outside также установлен на true, поэтому подсказка всегда находится сверху, независимо от того, соответствует ли она диаграмме svg.

Однако при прокрутке вы можете увидеть следующую подсказку прокрутка Более того, когда вы наводите курсор на серию, подсказка отображается в различных положениях.

Есть ли способ исправить это? К вашему сведению, если вы установите tooltip.outside на false, все будет работать отлично. Я уверен, что проблема заключается в том, что при значении true вычисление, определяющее, где отображать всплывающую подсказку, больше не является правильным, поскольку позиция изменилась при прокрутке.

Итак, чтобы подвести итог Появляются 2 проблемы:

1. Подсказка следует за прокруткой
2. При повторном наведении позиция на всплывающей подсказке в серии неверна.

См. Рисунок по этому вопросу: https://imgur.com/a/Zj3NstL См. Пример: https://jsfiddle.net/tcqeo415/2/

Если вы закомментируете мой CSS код в примере, вы сможете чтобы увидеть, как это должно работать

Answer 1

Этот ответ очень похож на @ppotaczek с точки зрения идеи просто другой реализации.

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

Решением будет использование tooltip.positioner и отключить кеширование с помощью null, если отображает chartsPosition.

 positioner: function (w, h, point) {
    this.chart.pointer.chartPosition = null;
    return this.getPosition(w, h, point);
  },

Это заставит график пересчитать положение графиков. Обратите внимание, что это может быть дорого DOM.

Тогда, если вы хотите сохранить прокручиваемое поведение checkout @ ppotaczeck's answer. Приведенный ниже код удалит все подсказки при прокрутке (работает только для первого примера)

document.body.addEventListener("scroll", function() {
  Highcharts.charts[0].tooltip.hide(0);
}, true)

Пример: https://jsfiddle.net/gv1m6tjy/

Answer 2

Диаграмма не пересчитывает свое положение, поскольку не отслеживает событие scroll.

Чтобы исправить это, вы можете пересчитать chart.pointer.chartPosition.top. Приведенный ниже код работает только для первого графика:

(function (H) {
  H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, points) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    this.points = points;
  });
}(Highcharts));

document.getElementById('container1').addEventListener('mouseenter', function(){
  var chart = Highcharts.charts[0];
  if (chart && chart.pointer && !chart.startChartPosY) {
    chart.pointer.getChartPosition();
    chart.startChartPosY = chart.pointer.chartPosition.top;
  }
});

document.getElementById('outer').addEventListener('scroll', function(e){
  var H = Highcharts,
    chart = H.charts[H.hoverChartIndex],
    tooltip = chart.tooltip;

  if (chart && chart.pointer) {
    chart.pointer.chartPosition.top = chart.startChartPosY - this.scrollTop;
  }

  if (tooltip && !tooltip.isHidden) {
    tooltip.refresh(tooltip.points);
  }
});

---

Демонстрационная версия: https://jsfiddle.net/BlackLabel/ao0c21g6/3/

Документы: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts