2017-07-05 4 views

Répondre

0

Vous pouvez utiliser pointFormatter pour calculer le contenu de l'info-bulle dynamique. Dans le rappel, vous pouvez vérifier si la bulle planante chevauche d'autres bulles.

function areOverlapping(bubble1, bubble2) { 
    const {translateX: tx, translateY: ty } = bubble1.series.group 

    const x1 = tx + bubble1.plotX 
    const y1 = ty + bubble1.plotY 
    const r1 = bubble1.marker.radius 

    const x2 = tx + bubble2.plotX 
    const y2 = ty + bubble2.plotY 
    const r2 = bubble2.marker.radius 

    const x = x1 - x2 
    const y = y1 - y2 
    const r = r1 + r2 

    return x * x + y * y <= r * r 
} 

Tooltip.pointFormatter:

series: [{ 
    tooltip: { 
    pointFormatter: function() { 
     const overlapCount = this.series.data.reduce((sum, point) => { 
     return sum + (point !== this && areOverlapping(this, point)) 
     }, 0) 

     return 'Overlapping bubbles: ' + overlapCount 
    } 
    }, 

exemple: https://jsfiddle.net/0yzkfdjr/