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

Question

Я столкнулся с проблемой неправильной подсказки точки на синхронизированных графиках. На синхронизированных графиках показано перекрестие, и я использую ordinal:false Я строю эквидистантные тики.

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

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

вот существующая SO скрипка, которую я нашел https://jsfiddle.net/jknipp/g3vr5v44/13/

Answer 1

Чтобы достичь необходимого эффекта, просто верните false, если window.isOutOfSync, вместо No data строки здесь:

formatter: function(tooltip) {
          var header,
            s = [];

          console.log(window.isOutOfSync);
          if (window.isOutOfSync) {
            console.log("don't show tooltip");
            //return false;
            console.log(this)
            return false;
          }

          $.each(this.points, function(i, point) {

            // check to see if the point is in the overall graph
            //var overallChart = $("#total_success_rates").highcharts();
            //console.log(overallChart);

            var isSuccessRate = (point.series.name == 'Success');

            if (header == null) {
              var config = point.point.getLabelConfig();
              header = tooltip.tooltipFooterHeaderFormatter(config);
            }
            s.push(formatSuccessRateToolTip(point.y, isSuccessRate));
            // $("#" + point.series.name.toLowerCase() + "-rate").html(point.y + "%");
          });

          return header + s.reverse().join('<br>');
        }

[EDIT]

Дополнительно, пожалуйста, вызовите reflow() внутри функции chart.events.load на обеих диаграммах, как показано ниже:

  chart: {
    renderTo: container,
    type: 'areaspline',
    events: {
        load() {
        this.reflow()
      }
    },
    height: '220',
    spacingBottom: 20,
    spacingTop: 20,
    spacingLeft: 20,
    spacingRight: 20
  },

Живой пример: https://jsfiddle.net/27veyw1d/