Highcharts - 处理重叠区域样条点上的点击

每次单击系列中的某个点时，我都需要获取点详细信息，但单击区域样条线重叠点不会触发“单击”事件。仅当该系列的点位于前面时才会触发。

        plotOptions: {
            series: {
                events: {
                    click: function(event) {
                        alert(this.name);
                    }   
                }
            }
        },

我做了一个小fiddle http://jsfiddle.net/c2P63/14/显示它。

Thanks.

如果你设置按区域追踪 http://api.highcharts.com/highcharts/plotOptions.area.trackByArea选项为 true 它将启用捕获点击事件，即使该系列位于另一个系列之后。

 plotOptions: {
            series: {
              trackByArea: true,
                events: {
                    click: function(event) {
                        alert(this.name);
                    }   
                }
            }
        },

例子：http://jsfiddle.net/83x6L69x/ http://jsfiddle.net/83x6L69x/

但是，即使您未完全点击该点，这也会捕获事件。为了避免这种情况，您可以检查单击事件是否在点标记内完成：

      plotOptions: {
        series: {
          trackByArea: true,
          point: {
            events: {
              click: function(e) {
                console.log(this)
                const group = this.series.group
                const x = e.chartX - this.plotX - group.translateX
                const y = e.chartY - this.plotY - group.translateY
                const d = (x * x + y * y)

                const rPlus = this.graphic.states.hover.radiusPlus // it is an additional radius when the point is hovered
                const r = this.graphic.radius + (rPlus || 0)

                if (x * x + y * y <= r * r) {
                  alert(this.series.name)
                }
              }
            }
          }
        }
      },

例子：http://jsfiddle.net/dh4zn6h4/ http://jsfiddle.net/dh4zn6h4/