如何为 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});
}
}
我正在使用自定义工具提示样式,我怀疑工具提示会干扰正常的鼠标事件。
最佳答案
如何简单地将鼠标悬停的项目的不透明度设置为 1
以及将其他项目设置为 0.3
:
if(segment!==currentItem){
segment.graphic.attr({opacity: 0.3});
} else {
segment.graphic.attr({opacity: 1});
}
这样悬停的列肯定会突出显示。在某些情况下,当移动到新列时,您移动到的项目仍然具有 0.3
的不透明度,导致看似不一致的行为,这意味着发生了两个 mouseover
事件,而不是中间 mouseout
。当鼠标事件几乎同时发生并且元素彼此非常接近(甚至重叠)时,就会发生这种情况。
关于javascript - Highcharts - 如何为列获得一致的鼠标悬停和鼠标移出事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33787889/