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

Question

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

Проблема в следующем примере: во всплывающей подсказке всегда отображаются 3 серии, хотя в данный момент присутствуют только две серии.

1) Как сделать так, чтобы серия отображалась во всплывающей подсказке только тогда, когда она действительно присутствует?

2) Как убедиться, что всплывающая подсказка закрывается при выходе из графика?

JSFiddle: https://jsfiddle.net/qoL7fx27/1/

Код для синхронизации в скрипте:

$('#container').bind('mousemove touchmove touchstart', function (e) {
    var chart,
        point,
        i,
        event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        var points = [];
        // Find coordinates within the chart
        event = chart.pointer.normalize(e.originalEvent);
        // Get the hovered point
        for(var j=0; j<chart.series.length; j++) {
           point = chart.series[j].searchPoint(event, true);
           points.push(point);  
        }

        chart.tooltip.refresh(points);

    }
});

Answer 1

Вот мое решение.Это прекрасно работает для меня.Я сделал корректировки на основе Синхронизация нескольких графиков

Демо здесь

Следующий код показывает / скрывает всплывающую подсказку и обеспечивает ее выравнивание по mousemove и mouseleave.

Обратите внимание, что я обнаружил, что мне нужно найти только первую найденную точку и использовать ее, чтобы показать / скрытьвсплывающая подсказкаЭто потому, что все мои временные ряды имеют одинаковые значения x.

$("#container").bind("mousemove mouseleave", function(e) {
  for (let i = 0; i < Highcharts.charts.length; ++i) {
    let hart = Highcharts.charts[i];
    let event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
    let point;
    for (let j = 0; j < chart.series.length && !point; ++j) {
      point = chart.series[j].searchPoint(event, true);
    }
    if (!point) return;

    if (e.type === "mousemove") {
       point.onMouseOver();
      chart.xAxis[0].drawCrosshair(event, point); // Show the crosshair
    } else {
      point.onMouseOut();
      chart.tooltip.hide(point);
      chart.xAxis[0].hideCrosshair();
    }

  }
});

Продолжайте сбрасывать функцию reset, чтобы запретить HighCharts сбросить точки - мы берем на себя управление.

Highcharts.Pointer.prototype.reset = function() {
  return undefined;
};

Answer 2

1) Как сделать так, чтобы серия отображалась во всплывающей подсказке только тогда, когда она действительно присутствует?

Нежелательное поведение вызвано функцией searchPoint - она ​​возвращаетближайшая точка, даже если позиция х не совпадает с другими точками.Поэтому, если у серии есть только одна точка, она всегда будет найдена.

Решение:

Вручную выберите точки для отображения в tooltip.formatter:

        formatter: function() {
          var outputString = '';

          this.points.forEach(function(point) {
            if (point.x === this.x) {
              outputString += "<span style='color:" + point.color + "'>\u25CF</span> " + point.series.name + ": <b>" + point.y + "</b><br/>";
            }
          }, this);
          return outputString;
        }

Справочник по API: https://api.highcharts.com/highcharts/tooltip.formatter

---

2) Как убедиться, что всплывающая подсказка закрыта при выходе из графика?

Восстановите функцию по умолчанию Highcharts.Pointer.prototype.reset, удалив следующие строки:

Highcharts.Pointer.prototype.reset = function() {
  return undefined;
};

---

Демонстрация для обоих вопросов: https://jsfiddle.net/BlackLabel/2mxxrk5n/

---

Обновление:

Я отправил неправильный ответ на второй вопрос.Этот код скрывает всплывающие подсказки:

$('#container').bind('mouseout', function(e) {
  Highcharts.charts.forEach(function(chart) {
    chart.tooltip.hide();
    // undo point highlight
    chart.series.forEach(function(series) {
        series.points.forEach((point) => point.setState(''));
    });
  });
});

---

Подскажите, пожалуйста, как выделить соответствующие точки на каждом графике?На данный момент всплывающая подсказка отображается правильно, однако точки не выделены на трех графиках

Этот фрагмент основных моментов:

points.forEach(function(point_) {
  if (point_) {
    point_.highlight(e);
  }
}, this);

Для достижения желаемого поведения вы должны предоставитьлогика для фильтрации точек, которые должны быть выделены.Вот очень упрощенный пример, адаптированный к этому конкретному случаю:

// provide a logic for filtering points
if(points[0] && points[1].x > 0) {
    points.pop(); // remove the unwanted point
}