ChartJs气泡图鼠标悬停时气泡异常放大问题求助

我看你遇到的问题是气泡图悬停时尺寸异常放大，虽然设置了hoverRadius但没生效，这主要有两个关键点需要调整：

1. 半径值必须是数字类型 #

你代码里把r（气泡半径）转成了字符串类型（.toString()），但Chart.js需要数值类型来正确计算尺寸和交互行为，这会导致hover时的尺寸计算异常，是问题的核心原因之一。

2. 确保hoverRadius与气泡原始半径一致 #

要让悬停时尺寸不变，需要让每个气泡的hoverRadius等于它的原始半径r，而且要把这个配置放在数据点级别，这样才能精准匹配每个气泡的尺寸。

修改后的完整代码 #

// 初始化数据集数组
const data = [];

for (var i = 0; i < response.data.length; i++) {
  const returnPercentage = Math.round(response.data[i]['return_percentage']);
  const point_data = [{
    x: response.data[i]['return_tickets'], // 若x轴为类别轴，再转字符串即可
    y: returnPercentage,
    r: returnPercentage,
    hoverRadius: returnPercentage // 关键：让hover半径与原始半径完全一致
  }];
  
  data.push({
    label: response.data[i]['staff_name'],
    data: point_data,
    backgroundColor: getRandomColor()
  });
}

new Chart(document.getElementById("bubbleChart"), {
  type: 'bubble',
  data: { datasets: data },
  options: {
    title: { display: true, text: '' },
    scales: {
      yAxes: [{
        scaleLabel: { display: true, labelString: "Return Tickets %" }
      }],
      xAxes: [{
        scaleLabel: { display: true, labelString: "Return Tickets" }
      }]
    },
    // 可选：兜底配置，确保hover行为符合预期
    hover: {
      mode: 'nearest',
      intersect: true
    }
  }
});

关键修改点说明 #

• 移除了x、y、r的.toString()转换，保留数值类型（如果你的x轴是类别轴，再单独把x转成字符串即可）
• 在每个数据点里添加hoverRadius: returnPercentage，确保悬停时半径和原始半径完全匹配
• 去掉了数据集级的hoverRadius:4，因为点级别的配置优先级更高，避免冲突

这样修改后，鼠标悬停气泡时就会保持原有尺寸，不会出现异常放大的情况了。

内容的提问来源于stack exchange，提问作者Nouman Bhatti