使用jQuery Flot气泡图遇低Y值显示异常求解决方案

我之前碰过Flot Bubbles插件的类似坑，你的情况根本不是Y轴数值必须≥100，而是插件默认的气泡尺寸计算逻辑在小数值场景下失效了——当Y轴数值普遍偏小（比如<100）时，它会把气泡半径算成几乎看不见的大小，甚至负数，自然就渲染不出来啦。

两种可行的修复方案 #

1. 强制指定气泡的半径范围 #

直接在插件配置里手动设置气泡的最小和最大半径，让插件忽略自动计算的逻辑，确保小数值对应的气泡也能正常显示：

var optionsEarnings = {
 series: {
 color: "#62CB31",
 bubbles: {
 active: true,
 show: true,
 fill: true,
 linewidth: 2,
 // 关键：添加radius配置，固定气泡大小区间
 radius: {min: 5, max: 20} 
 }
 },
 xaxis: {
 ticks: dataEarningsPeriods,
 autoscaleMargin: 0.25
 },
 yaxis: {
 axisLabelUseCanvas: true,
 axisLabelFontSizePixels: 12,
 axisLabelFontFamily: 'Verdana, Arial',
 axisLabelPadding: 10
 },
 grid: {
 tickColor: "#f0f0f0",
 borderWidth: 1,
 borderColor: 'f0f0f0',
 color: '#6a6c6f'
 }
};

2. 缩放数据数值（业务允许的话） #

如果你的业务场景允许，也可以把小数值按比例放大（比如乘以10），然后在Y轴标签上标注说明，这样既能绕过插件的计算问题，也不影响数据的可读性：

// 把原始小数值放大10倍
var dataEarningsActual = [[1, 15*10, 10], [2, 15*10, 10], [3, 16*10, 10], [4, 13*10, 10]];
var dataEarningsEstimate = [[1, 13*10, 10], [2, 14*10, 10], [3, 12*10, 10], [4, 15*10, 10]];

// 在Y轴配置里补充数值说明
var optionsEarnings = {
 // ...其他配置不变
 yaxis: {
 axisLabelUseCanvas: true,
 axisLabelFontSizePixels: 12,
 axisLabelFontFamily: 'Verdana, Arial',
 axisLabelPadding: 10,
 axisLabel: 'Earnings (×0.1)' // 提示用户实际数值是显示值的1/10
 }
};

为什么会出现这个问题？ #

Flot Bubbles插件默认会根据Y轴的整体数值范围动态计算气泡半径，当Y轴的最大值很小的时候，插件会把气泡半径压缩到极小的尺寸（甚至接近0），浏览器就无法渲染出可见的气泡了。手动指定radius范围相当于给插件“定死”了气泡的大小区间，彻底避开了这个自动计算的坑。

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