Highcharts - 處理點擊重疊區域點線

Question

每次點擊某個系列的某個點時，我需要獲取點詳細信息，但點擊區域線重疊點不會觸發「點擊」事件。它只有在系列中的點位於前面時纔會觸發。

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

我做了一個小的fiddle顯示它。

謝謝。

Answer 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/