如何在 HighMaps 中通过拖动选择框获取多个区域

Question

使用 HighMaps，我们试图让用户选择多个区域。如果用户单击然后按住 SHIFT 单击他们想要的其他区域，则此方法可以正常工作。在 HighCharts 中，我们可以使用可拖动的框来选择多个点（就像在散点图中一样）。我想允许这种类似的拖动来选择 HighMaps 中的选项。一个天真的例子是here。这是无效的。

我认为解决方案涉及鼠标悬停效果。这样当鼠标光标进入该区域时，整个区域都会被突出显示。如果我可以根据我的目的修改此代码，以便可拖动框的范围也将成为悬停的触发器。

chart: {
  events: {
    selection: function(event) {
      for (var i = 0; i < this.series[0].data.length; i++) {
        var point = this.series[0].data[i];
        if (point.x > event.xAxis[0].min &&
          point.x < event.xAxis[0].max &&
          point.y > event.yAxis[0].min &&
          point.y < event.yAxis[0].max) {
          point.select(true, true);
        }
      }
      return false;
    }
  },
  zoomType: 'xy'
},

Answer 1

您需要比较正确的x 和y 值：

events: {
    selection: function(event) {
        for (var i = 0; i < this.series[0].data.length; i++) {
            var point = this.series[0].data[i],
                xAxis = event.xAxis[0],
                yAxis = event.yAxis[0];

            if (point.graphic) {
                if (point._minX > xAxis.min &&
                    point._maxX < xAxis.max &&
                    point._minY > yAxis.min &&
                    point._maxY < yAxis.max) {

                    point.select(true, true);
                }
            }
        }
        return false;
    }
}

现场演示： https://jsfiddle.net/BlackLabel/m4ubd0z2/