Ошибка синхронизации Highcharts 6.0

Question

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

Вы можете посмотреть пример здесь: http://jsfiddle.net/nhng5827/o9uh2jqy/42/

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

Я провел немало исследований и реализовал некоторый код, который я видел, который позволяет синхронизировать диаграммы с 2 сериями (http://jsfiddle.net/mjsdnngq/72/),, однако, я думаю, что самое большое отличие в моем заключается в том, что серии перейти только к половине реального графика.

    $('#container').bind('mousemove touchmove touchstart', function (e) {
      var chart,
      points,
      i,
      secSeriesIndex = 1;

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

          if (points[0] && points[1]&& points[2]&& points[3]) {
              // if (!points[0].series.visible) {
              //     points.shift();
              //     secSeriesIndex = 0;
              // }
              // if (!points[secSeriesIndex].series.visible) {
              //     points.splice(secSeriesIndex,1);
              // }
              if (points.length) {
                  chart.tooltip.refresh(points); // Show the tooltip
                  chart.xAxis[0].drawCrosshair(e, points[0]); // Show the crosshair
                  chart.xAxis[0].drawCrosshair(e, points[3]); // Show the crosshair
              }
          }
      }
  });
 /**
  * Override the reset function, we don't need to hide the tooltips and crosshairs.
  */
 Highcharts.Pointer.prototype.reset = function () {
     return undefined;
 };
Highcharts.Point.prototype.highlight = function (event) {
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh([points[0],points[1],points[2],points[3]]); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
 * Synchronize zooming through the setExtremes event handler.
 */
function syncExtremes(e) {
    var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
        Highcharts.each(Highcharts.charts, function (chart) {
            if (chart !== thisChart) {
                if (chart.xAxis[0].setExtremes) { // It is null while updating
                    chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
                }
            }
        });
    }
}

Любая помощь будет очень цениться.

Answer 1

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

        Highcharts.each(chart.series, function(s) {
            Highcharts.each(s.points, function(p) {
                p.setState('');
            });
        });

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/cvb6pwsu/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Point#setState

Также, пожалуйста, посмотрите на этот пример: http://jsfiddle.net/BlackLabel/6f37b42q/, это может быть полезно для вас.