ChartJS气泡图：固定高度下控制气泡半径像素大小防过大

当然可以实现气泡半径的比例缩放，将最大半径限制为100px，以下是两种实用方案：

方案一：预处理数据缩放半径 #

提前计算原始count值的缩放比例，直接转换为符合要求的半径值：

假设你的原始数据结构如下：

const rawBubbleData = [
  { x: 15, y: 30, r: 800 }, // r为原始count值
  { x: 25, y: 45, r: 400 },
  // ...更多数据项
];

计算缩放比例并转换数据：

// 找出所有count中的最大值
const maxCount = Math.max(...rawBubbleData.map(item => item.r));
// 计算缩放因子，确保最大count对应100px半径
const scaleRatio = 100 / maxCount;

// 生成缩放后的数据集
const scaledBubbleData = rawBubbleData.map(item => ({
  ...item,
  r: item.r * scaleRatio
}));

之后将scaledBubbleData传入图表的data.datasets[0].data即可。

方案二：使用ChartJS脚本化动态计算半径 #

无需修改原始数据，直接在数据集配置中通过脚本化选项动态计算每个气泡的半径：

修改你的数据集配置（注意是dataset而非options）：

const bubbleDataset = {
  type: 'bubble',
  data: rawBubbleData, // 传入原始数据，r为原始count值
  radius: (context) => {
    // 获取当前数据集的所有count值
    const allCounts = context.dataset.data.map(item => item.r);
    const maxCount = Math.max(...allCounts);
    const scaleRatio = 100 / maxCount;
    // 计算缩放后的半径，可额外添加最小半径限制避免气泡过小
    return Math.max(context.raw.r * scaleRatio, 5);
  }
};

你的现有options配置无需改动，直接配合上述任一方案即可实现需求。

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