Highcharts鼠标在错误的时间触发事件

highcharts mouse over/out events fired in wrong timing

本文关键字：事件 时间 鼠标 错误 Highcharts      更新时间：2023-09-26

我有一个柱状图，鼠标在series.point上移过和移出事件。事件，我需要使用当前悬停列类别。在进入列区域时触发over事件，但在列本身悬停时触发out事件。这种行为正确吗?我是不是用错了方式来利用这些事件?

以下是图表选项:

  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);
      }
    }
  }
}]

};

***超时只用于调试

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

您想要的是将事件放在plotOptions

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);
                    }
                }
            }
        }
    }

更新小提琴与删除共享:true工具提示:

更新小提琴

我相信如果你删除setTimeout，它会工作得很好。你看到触发'鼠标悬停事件'后2秒。

请设置stickkytracking =false，因为如果为true，在鼠标移动到另一个系列之前，不会触发该系列上的mouseOut事件。[http://api.highcharts.com/highcharts/plotOptions.bar.stickyTracking]

和工具提示。shared=false，因为当鼠标在系列之间移动时，工具提示将被隐藏。

$(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/]

相关文章：