Highcharts - handle click on overlapping areaspline point

问题

I need to get the point details every time I click on a certain point of a series, but clicking on a areaspline overlapped point doesn't trigger the 'click' event. It triggers only if the points of the series are in front.

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

I made a small fiddle showing it.

Thanks.

回答1:

If you set trackByArea option to true it will enable catching click events even if the series is behind another series.

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

example: http://jsfiddle.net/83x6L69x/

However, this will catch events even when you click not exactly on the point. To avoid it, you can check if the click event was done inside the point's marker:

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

example: http://jsfiddle.net/dh4zn6h4/

来源：https://stackoverflow.com/questions/44966730/highcharts-handle-click-on-overlapping-areaspline-point