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

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