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

Question

У меня есть три графика. Все диаграммы имеют одинаковую ось X и имеют связанные подсказки. https://codepen.io/austeng/pen/gOppRWY

function syncronizeCrossHairs(chart) {
  var container = $(chart.container),
      offset = container.offset(),
      x, y;

  container.mousemove(function (evt) {

    x = evt.clientX - chart.plotLeft - offset.left;
    y = evt.clientY - chart.plotTop - offset.top;
    var xAxis = chart.xAxis[0];
    var xVal = xAxis.toValue(x, true);

    var chart1_points = chart1.series[0].points;
    Highcharts.each(chart1_points, function (point, i) {
      if (i + 1 < chart1_points.length && point.x <= xVal && chart1_points[i + 1].x > xVal) {

        point.setState();
        chart1_points[i + 1].setState();

        if (xVal - point.x <= chart1_points[i + 1].x - xVal) {
          chart1.tooltip.refresh(point);
          point.setState('hover');
        } else {
          chart1.tooltip.refresh(chart1_points[i + 1]);
          chart1_points[i + 1].setState('hover');
        }
      }
    });

    var chart2_points = chart2.series[0].points;
    Highcharts.each(chart2_points, function (point, i) {
      if (i + 1 < chart2_points.length && point.x <= xVal && chart2_points[i + 1].x > xVal) {

        point.setState();
        chart2_points[i + 1].setState();

        if (xVal - point.x <= chart2_points[i + 1].x - xVal) {
          chart2.tooltip.refresh(point);
          point.setState('hover');
        } else {
          chart2.tooltip.refresh(chart2_points[i + 1]);
          chart2_points[i + 1].setState('hover');
        }
      }
    });

    var chart3_points = chart3.series[0].points;
    Highcharts.each(chart3_points, function (point, i) {
      if (i + 1 < chart3_points.length && point.x <= xVal && chart3_points[i + 1].x > xVal) {

        point.setState();
        chart3_points[i + 1].setState();

        if (xVal - point.x <= chart3_points[i + 1].x - xVal) {
          chart3.tooltip.refresh(point);
          point.setState('hover');
        } else {
          chart3.tooltip.refresh(chart3_points[i + 1]);
          chart3_points[i + 1].setState('hover');
        }
      }
    });
  });
}

Мой вопрос: могу ли я заполнить всплывающую подсказку, над которой я сейчас нахожусь, данными из других графиков? Например, если я наведу курсор на график 1 12 июля 2017 года ... я увижу всплывающую подсказку с силой: 95,60, силой: 0,32 (данные графика 2 на 12 июля 2017 года) и скоростью: 0,90 (данные графика 3 на 12 июля 2017 г.).

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

Спасибо за любые советы!

Answer 1

Вы можете определить структуру всплывающей подсказки в функции pointFormatter, например, следующим образом:

 pointFormatter: function() {
   var thisChart = this.series.chart,
     pointIndex = this.index,
     point,
     result = '';

   if (thisChart === Highcharts.charts[Highcharts.hoverChartIndex]) {
     Highcharts.charts.forEach(function(chart) {
       point = chart.series[0].points[pointIndex];

       result += '<span style="color:' + point.color + '">●</span> ' + point.series.name + ': <b>' + point.y + '</b><br/>'
     });

   } else {
    result = '<span style="color:' + this.color + '">●</span> ' + this.series.name + ': <b>' + this.y + '</b><br/>'
   }

   return result;
 }

---

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4814/

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