Не все всплывающие подсказки и перекрестия не исчезают из синхронизированных диаграмм, когда мышь покидает диаграмму

Question

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

Есть ли способ заставить подсказки и перекрестие исчезать, когда мышь оставляет один график?

Этот предыдущий вопрос содержит ссылки на jsfiddles, которые показывают проблему: Захват событий касания (touchstart и touchmove) в дополнение к движению мыши для синхронизации высоких графиков

ОБНОВЛЕНИЕ: я выяснил, как вызвать событие mouseOut, когда курсор покидает область диаграммы, но я все еще борюсь с кодом, необходимым для запуска скрытия всплывающей подсказки и перекрестия

plotOptions: {
      spline: {
        events: {
          mouseOut: function() {
              console.log('Chart Clear!');
            }
      }
    },

Лучший jsfiddle, к которому можно обратиться, чтобы увидеть проблему: jsfiddle.net / BlackLabel / xLsdrco8

ОБНОВЛЕНИЕ 2:

Рассматривая пример диаграммы синхронизации на сайте Highcharts, который у них есть следующий

// Override the reset function, we don't need to hide the tooltips and crosshairs.
Highcharts.Pointer.prototype.reset = function () {
  //Is this is where I would put code to hide the tooltips and crosshairs?
};

Я включил этот код на свою страницу, так как он останавливает любые всплывающие подсказки и перекрестие однако я бы предпочел, чтобы они исчезли, когда курсор отсутствует на графике.

ОБНОВЛЕНИЕ 3:

Я нашел следующий код здесь: http://jsfiddle.net/mushigh/a3kjrz6u/

$('#container').bind('mouseleave mouseout ', function(e) {
    var chart,
      point,
      i,
      event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
      chart = Highcharts.charts[i];
      event = chart.pointer.normalize(e.originalEvent);
      point = chart.series[0].searchPoint(event, true);

      point.onMouseOut(); 
      chart.tooltip.hide(point);
      chart.xAxis[0].hideCrosshair(); 
    }
  });

но я не уверен, как это включить в мой код здесь: http://jsfiddle.net/ashenshugar/716jx4n9/

Может кто-нибудь показать мне как заставить вышеуказанное работать в моем коде?

Answer 1

Вы можете упаковать свои контейнеры графиков в некоторый родительский элемент:

<div id="mainContainer">
  <div id="chart1_container" style="height: 400px"></div>
  <div id="chart2_container" style="height: 400px"></div>
  ...
</div>

и добавить функцию события, чтобы очистить подсказку и статус очков.

$('#mainContainer').bind('mouseleave mouseout ', function(e) {
  var chart,
    point,
    i,
    event;

  for (i = 0; i < Highcharts.charts.length; i = i + 1) {
    chart = Highcharts.charts[i];
    event = chart.pointer.normalize(e.originalEvent);

    chart.series.forEach(function(s) {
      point = s.searchPoint(event, true);

      if (point) {
        point.setState('');
      }
    });

    chart.tooltip.hide();
    chart.xAxis[0].hideCrosshair();
  }
});

---

Live демо: http://jsfiddle.net/BlackLabel/xLsdrco8/1/