Question

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

我可以看到可以捕捉彩色区域中的“点击”事件，但是由于事件也被触发，因此无法捕捉该彩色区域中的“mouseOver” 当你位于区域上方时（当trackByArea = true时）

以下是描述该问题的示例：

.slides {height:100%;}

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

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

Answer 1

在地图选项中添加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>

2018-01-01T00:00:00.000Z

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

1 个答案: