javascript - Highcharts 仅在彩色区域检测 mouseOver 事件

Question

我有一个“区域”类型的系列，我需要检测用户何时将鼠标悬停在彩色区域中仅以便在那里呈现标签。

我可以看到有可能在彩色区域捕获“click”事件，但是不可能在该彩色区域捕获“mouseOver”仅，因为该事件也被触发当您位于区域上方时(当 trackByArea=true 时)

这是描述问题的示例:

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  title: {
    text: 'US and USSR nuclear stockpiles'
  },
  series: [{
    name: 'USA',
    data: [6, 11, 32, 110, 235, 369, 640,
      1005, 1436, 2063, 3057, 4618, 6444
    ],

    trackByArea: true,
    cursor: 'pointer',

    events: {
      //Click event is triggered only inside the area
      click: function(event) {
        alert('Trigger Drilldown')
      },
      //mouseOver event is triggered inside and above the area
      mouseOver: function(event) {
        console.log('TriggermouseOver')
      }
    }
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

作为旁注，我意识到这应该是可能的，因为光标在区域内时正在更新。谢谢!

Answer 1

在绘图选项中添加stickyTracking: false,

plotOptions: {
 series: {
  stickyTracking: false,
 }
},

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  title: {
    text: 'US and USSR nuclear stockpiles'
  },
  plotOptions: {
    series: {
      stickyTracking: false,
    }
  },
  series: [{
    name: 'USA',
    data: [6, 11, 32, 110, 235, 369, 640,
      1005, 1436, 2063, 3057, 4618, 6444
    ],

    trackByArea: true,
    cursor: 'pointer',

    events: {
      //Click event is triggered only inside the area
      click: function(event) {
        alert('Trigger Drilldown')
      },
      //mouseOver event is triggered inside and above the area
      mouseOver: function(event) {
        console.log('TriggermouseOver')
      }
    }
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>