高图-处理重叠区域上的单击 [英] 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.

谢谢.

推荐答案

如果设置 trackByArea 选项设置为true，即使该系列在另一个系列之后，也可以捕获点击事件.

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

示例: http://jsfiddle.net/83x6L69x/

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

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

示例: http://jsfiddle.net/dh4zn6h4/

这篇关于高图-处理重叠区域上的单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！