Highcharts Maus Tracking-Verhalten mit mehreren Bereichsbereich & Linie Serie

Question

Ich habe ein Diagramm erstellt, das arearange Serie als eine Art Gantt Overlay gegen eine line Serie verwendet.

JSFiddle

Das Problem ist, dass, wenn über die arearange Serie schwebt, der Tooltip auf die andere Serie springt, wie Sie den Cursor zu bewegen von links nach rechts. Das Bild unten zeigt diesen Effekt (der rote Punkt zeigt Position Maus):

Ich habe versucht, die folgenden Optionen einstellen, wie in den API beschrieben:

plotOptions.series.stickyTracking: false 
tooltip.shared: false 

Und ich habe sogar versucht: tooltip.snap: 0

Aber der Jumping-Effekt tritt immer noch auf. Meine Absicht ist es, die mouseOver und mouseOut Ereignisse zu verbinden, so dass ich einige zusätzliche Details unter dem Diagramm anzeigen kann - dies ist jedoch nicht mit dem aktuellen Verhalten machbar.

Ist es möglich, die mouseOver & mouseOut Ereignisse ausgelöst nur wenn der Cursor direkt über die Serie bewegt? Liegt das an meiner Konfiguration oder einer Einschränkung mit der aktuellen Highcharts-Version?

Answer 1

Ich habe einen Vorschlag von der Highcharts GitHub-Seite this, ich habe einige zusätzliche Punkte in meinem Bereich interpoliert, so dass der Tooltipp den nächsten Punkt finden kann (im Gegensatz zu der Linie, die ich erwartet hatte).

Siehe dieses JSFiddle für ein Beispiel.

arearange Interpolationsfunktion:

function interpolateAreaRange(data, splitBy) { 
    var interpolate = function(x1, x2, x3, y1, y2) { 
    return y1 + (y2 - y1) * (x2 - x1)/(x3 - x1); 
    }; 
    var newData = [], 
    step = 0, 
    xStart = 0, 
    xEnd = 0, 
    xNew = 0, 
    p = 0; 
    if (data.length > 1 && splitBy > 0) { 
    newData.push(data[0]); 
    for (var i = 1; i < data.length; i++) { 
     p = i - 1; 
     xStart = data[p][0]; 
     xEnd = data[i][0]; 
     step = (xEnd - xStart)/splitBy; 

     for (var s = 1; s <= splitBy; s++) { 
     xNew = xStart + (step * s); 
     newData.push([ 
      xNew, 
      interpolate(xStart, xNew, xEnd, data[p][1], data[i][1]), 
      interpolate(xStart, xNew, xEnd, data[p][2], data[i][2]) 
     ]); 
     } 
     newData.push(data[i]); 
    } 
    return newData; 
    } 
    return data; 
}