javascript - Highcharts - 如何为列获得一致的鼠标悬停和鼠标移出事件？

Question

如何为 highcharts 列获得一致的鼠标悬停和鼠标移出事件？

在此 js fiddle 中，可以通过沿着图表中间水平来回悬停鼠标来重现该问题。

编辑:此问题已通过以下接受的答案解决。
此外，我建议将 tooltip.shared 设置为 false，将 plotOptions.column.stickyTracking 设置为 false。

tooltip: 
  shared: false 
plotOptions:
  column:
    stickyTracking: false # Mouse events will occur on column vs surrounding area
    point:
      events:
        mouseOut: onItemMouseOut
        mouseOver: onItemMouseOver
      states:
        hover:
          enabled: false # Removes default mouse over behavior.

在屏幕截图中，箭头表示鼠标沿着图表中间来回悬停。预期的行为是当前悬停的列将完全不透明。

这是在 highcharts 选项配置中声明鼠标事件的方式:

plotOptions:{
            column:{
                point: {
                  events:  {
                    mouseOut: onItemMouseOut,
                    mouseOver: onItemMouseOver
                    },
                },
                states:{hover:{enabled:false}},
            },
        },

这些是鼠标事件处理程序:

var onItemMouseOver = function(){
    console.log('mouseover');
    var chart = $('#container').highcharts();
    var series = chart.get('series-1');
    var currentItem = this;
    // Reduce opacity of all columns besides currently hovered column.
    for(var i=0; i<series.segments[0].length;i++){
        var segment = series.segments[0][i];
        if(segment!==currentItem){
            segment.graphic.attr({opacity: 0.3});
        }
    }
}

var onItemMouseOut = function(){
    console.log('mouseout');
    var chart = $('#container').highcharts();
    var series = chart.get('series-1');
    var currentItem = this;
    for(var i=0; i<series.segments[0].length;i++){
        var segment = series.segments[0][i];
        segment.graphic.attr({opacity: 1});
    }
}

我正在使用自定义工具提示样式，我怀疑工具提示会干扰正常的鼠标事件。

Answer 1

如何简单地将鼠标悬停的项目的不透明度设置为 1 以及将其他项目设置为 0.3:

if(segment!==currentItem){
    segment.graphic.attr({opacity: 0.3});
} else {
    segment.graphic.attr({opacity: 1});
}

Fiddle Example

这样悬停的列肯定会突出显示。在某些情况下，当移动到新列时，您移动到的项目仍然具有 0.3 的不透明度，导致看似不一致的行为，这意味着发生了两个 mouseover 事件，而不是中间 mouseout。当鼠标事件几乎同时发生并且元素彼此非常接近(甚至重叠)时，就会发生这种情况。