Highcharts - 处理点击重叠区域样条点答案

【问题标题】：Highcharts - handle click on overlapping areaspline pointHighcharts - 处理点击重叠区域样条点
【发布时间】：2017-07-07 18:47:24
【问题描述】：

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

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

我做了一个小的fiddle 来展示它。

谢谢。

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

如果您将 trackByArea 选项设置为 true，即使该系列落后于另一个系列，它也将启用捕获点击事件。

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

示例：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/

【讨论】：