Проблемы реализации синхронизированной сюжетной линии и всплывающих подсказок для старших графиков

Question

Я пытаюсь реализовать синхронизированные старшие графики, как в этом jsfiddle http://jsfiddle.net/j7hk1802/, но у меня возникают проблемы.

Синхронизированная сюжетная линия отображается только слева или справа от графики (там, где нет данных), как только я перемещаю линию графика в область, где есть данные, синхронизация прерывается, и я получаю много консольных ошибок:

highcharts.src.js:21444 Uncaught TypeError: (c || []).forEach is not a function
    at n.applyInactiveState (highcharts.src.js:21444)
    at e.refresh (highcharts.src.js:20820)
    at test2.html:119
    at Array.forEach (<anonymous>)
    at Object.d.<computed> [as each] (highcharts.src.js:2207)
    at HTMLDivElement.<anonymous> (test2.html:112)
    at HTMLDivElement.dispatch (jquery-latest.js:4641)
    at HTMLDivElement.elemData.handle (jquery-latest.js:4309)

Это относится к следующему коду :

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);
    //remove old plot line and draw new plot line (crosshair) for this chart
    var xAxis1 = chart1.xAxis[0];
    var points1 = chart1.series[0].points;

    Highcharts.each(points1, function(point, i) {
      if (i + 1 < points1.length && point.x <= xVal && points1[i + 1].x > xVal) {
        //reset state
        point.setState();
        points1[i + 1].setState();

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

Я пытался создать jsfiddle для репликации ошибки, но я все еще изо всех сил пытаюсь показать работающие диаграммы в jsfiddle, однако моя попытка может быть найдена здесь: https://jsfiddle.net/ashenshugar/a72csgro/6/

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

Решение Себастьяна Вендзеля ниже приведена работа по удалению ошибок консоли, однако первая диаграмма синхронизируется с другой записью для других диаграмм:

Также подсказки для 3-й и 4-й диаграмм I ' добавлено, что не отображаются правильные серии, я уверен, что я не обновил код правильно для этих диаграмм, но не вижу свою ошибку.

Мой новый код здесь https://jsfiddle.net/ashenshugar/sj90gw4x/3/

Answer 1

Проблема, с которой вы сталкиваетесь, заключается в том, что вы вставили только одну точку в качестве аргумента в функцию tooltip.refre sh, в то время как для общей подсказки требуется массив точек, которые должны отображаться. Я делаю некоторые изменения, чтобы соответствовать вашему пользовательскому коду с общей подсказкой.

Демо: https://jsfiddle.net/BlackLabel/yrkjvft2/

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

  container.mousemove(function(evt) {
    x = evt.clientX - chart.plotLeft - offset.left;
    //remove old plot line and draw new plot line (crosshair) for this chart
    var xAxis1 = chart1.xAxis[0],
      points = [],
      points1 = [],
      e = chart1.pointer.normalize(evt); // Find coordinates within the chart   

    chart1.series.forEach(s => {
      var point = s.searchPoint(e, true)
      if (point) {
        point.setState();
        points.push(point)
      }
    })

    if (points) {
      var number = 0;
      Highcharts.each(points, function(p, i) {
        if (!p.series.visible) {
          points.splice(i - number, 1);
          number++;
        }
      })
      if (points.length) {
        chart1.tooltip.refresh(points); // Show the tooltip
      }
    }

    xAxis1.removePlotLine("myPlotLineId");
    xAxis1.addPlotLine({
      value: chart.xAxis[0].translate(x, true),
      width: 1,
      color: 'red',
      //dashStyle: 'dash',                   
      id: "myPlotLineId"
    });
...

Answer 2

Обновленный код для отображения правильных всплывающих подсказок для всех четырех диаграмм находится здесь jsfiddle.net / BlackLabel / 61bs9nfq и был предоставлен Себастьяном Вендзелем.

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

chart: {
      marginLeft: 100, //size of left margin in pixels
      marginRight: 100, //size of right margin in pixels
      }