highcharts-图表

Question

有人可以指导我如何获得高图表中的气泡数吗

Answer 1

您可以使用pointFormatter动态计算工具提示的内容。在回调中，您可以检查悬停气泡是否与其他气泡重叠。

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

示例：https://jsfiddle.net/0yzkfdjr/

highcharts-图表

highcharts- chart

bubble-chart

highcharts