Highcharts - 如何为列获得一致的mouseover和mouseout事件？

Question

如何为highcharts列获得一致的mouseover和mouseout事件？

可以通过在此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事件1}}。当鼠标事件几乎同时发生且元素彼此非常接近（甚至重叠）时，就会发生这种情况。