Highchart nächste Punkt Ursachen Fadenkreuz zeigen und seltsame Ordnung flackernde

Question

Nach meiner Frage vor einem Jahr Highchart tooltip show nearest point

, die den nächsten Punkt im Tooltip angezeigt, wenn die zwei oder mehr Reihen nicht über eine gleiche Länge

Wenn Sie jedoch die Maus um das Diagramm bewegen, können Sie sehen, dass sich die Reihenfolge der Reihen ändert und das Fadenkreuz zurück und viert wird. Ich habe ein kurzes Video hier aufgenommen

http://recordit.co/PxgJ8COnhF (auf dem Video, das Sie nicht mit dem Fadenkreuz Fehler bemerken)

und hier ist beispielsweise auf jsfiddle https://jsfiddle.net/ittikorns/ygscLp3h/4/

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function (proceed) { 

    var args = arguments, 
     points = args[1], 
     point = points[0]; 
     if (typeof points[0] !== "undefined") { 
      chart = point.series.chart;   
     } else { 
      chart = points; 
     } 

     // Loop over all the series of the chart 
     Highcharts.each(chart.series, function(series) { 
      // This one already exist 
      if (series == point.series || series.visible==false) return; 

      var current, 
       dist, 
       distance = Number.MAX_VALUE; 
      // Loop over all the points 
      Highcharts.each(series.points, function(p) { 
       // use the distance in X to determine the closest point 
       dist = Math.abs(p.x - point.x); 
       if (dist < distance) { 
        distance = dist; 
        current = p; 
       } 
      }); 

      // Add the closest point to the array 
      if(points.indexOf(current)==-1) 
       points.push(current); 
     }); 

     proceed.apply(this, [].slice.call(args, 1)); 

}); 


$(function() { 

    $('#container').highcharts({ 

title: { 
      text: 'Monthly Average Temperature', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com', 
      x: -20 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
      crosshair: true, 
     }, 
     yAxis: { 
      title: { 
       text: 'Temperature (°C)' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      valueSuffix: '°C', 
      shared: true, 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
     }, { 
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }]   

    }); 
}); 

Answer 1

Ich denke, dass alles hängt davon ab, die Reihenfolge der Punkte in Ihrem Punkte-Array. Im Moment ist es nicht immer dasselbe. Sie können eine Sortiermethode hinzufügen, die Ihre Punkte nach der Reihenfolge sortiert, zu der sie gehören. Schauen Sie sich diesen Code:

var compare = function (a, b) { 
    if (a.series._i < b.series._i) { 
     return -1 
    } else if (a.series._i > b.series._i) { 
     return 1 
    } 
    return 0 
} 

Hier sehen Sie ein Beispiel sehen, wie es funktionieren kann: https://jsfiddle.net/ygscLp3h/5/

Und hier können Sie die Änderungen finden die ich gemacht habe:

points = points.sort(compare); 
proceed.apply(this, [].slice.call(args, 1)); 

Wie Sie können siehe Ich habe Sortierfunktion hinzugefügt, bevor ich die Standardfunktion anwende.

Mit freundlichen Grüßen,