highcharts mouse over/out Ereignisse in falschem Timing ausgelöst

Question

Ich habe ein Säulendiagramm mit Maus über und out Ereignisse auf series.point.events, wo ich die aktuelle Spalte Spalte Kategorie verwenden müssen. Das Über-Ereignis wird ausgelöst, wenn Sie den Spaltenbereich aufrufen. Wenn Sie die Maus über die Spalte bewegen, wird das Ereignis "out" ausgelöst. Ist dieses Verhalten korrekt? Benutze ich die Ereignisse falsch?

hier sind die Diagrammoptionen:

var options = { 
chart: { 
    type: 'column' 
}, 

xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 
    'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 
    ] 
}, 

tooltip: { 
    shared: true, 
    crosshairs: true 
}, 

series: [{ 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
    point: { 
    events: { 
     mouseOver: function(event) { 
     setTimeout(() => { 
      $mouseState.html("mouse state OVER: " + this.category); 
     }, 2000); 
     }, 
     mouseOut: function() { 
     $mouseState.html("mouse state OUT: " + this.category); 
     } 
    } 
    } 
}] 

};

*** das Timeout ist nur nur für das Debuggen

http://jsfiddle.net/62yhg2hq/3/

Answer 1

Ich glaube, wenn Sie setTimeout entfernen, wird es funktionieren. Sie sehen, dass nach 2 Sekunden ein Mouseover-Ereignis ausgelöst wird.

Bitte machen Sie stickyTracking = false, denn wenn true, wird das mouseOut-Ereignis in einer Serie erst ausgelöst, wenn die Maus über eine andere Serie bewegt wird. [

Und make tooltip.shared = false, weil Tooltip ausgeblendet wird, wenn Sie die Maus zwischen den Serien bewegen.

$(function() { 
var i=0; 
var j=0; 
var $mouseState = $('#mouseState'); 
var $mouseState2 = $('#mouseState2'); 
var options = { 
chart: { 
    type: 'column' 
}, 

xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 
    'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 
    ] 
}, 

tooltip: { 
    shared: false, 
    crosshairs: true 
}, 

series: [{ 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
    stickyTracking: false, 
    point: { 
    events: { 
     mouseOver: function(event) { 

      $mouseState.html("mouse state OVER: " + this.category +" Number "+i++); 

     }, 
     mouseOut: function() { 
    $mouseState2.html("mouse state OUT: " + this.category +" Number "+ j++); 
     } 
    } 
    } 
    }] 
}; 

$('#container').highcharts(options); 
}); 

[http://jsfiddle.net/62yhg2hq/9/]

Answer 2

Was Sie wollen, ist die Ereignisse unter plotOptions gehen

plotOptions: { 
     series: { 
      cursor: 'pointer', 
      point: { 
       events: { 
        mouseOver: function(event) { 
         $mouseState.html("mouse state OVER: " + this.category); 
        }, 
        mouseOut: function() { 
         $mouseState.html("mouse state OUT: " + this.category); 
        } 
       } 
      } 
     } 
    } 

Aktualisiert Geige mit entfernt geteilt: true Tooltip:

Updated Fiddle