JavaScript图表基于最值自动生成最优刻度区间方法

你原有的逻辑存在三个明显缺陷：仅针对整数取整无法覆盖小数场景、只单独对端点计算阈值未考虑全区间跨度、循环自增凑整的方式在小数/超大数场景下性能差易出错。可以用图表领域通用的「1/2/5规整步长」逻辑实现，完全匹配你给出的示例效果。

核心实现步骤 #

• 先处理边界异常：如果min和max值相等，自动给区间加少量缓冲，避免区间长度为0无法绘图
• 计算原始区间跨度，基于跨度匹配认读成本最低的规整步长：步长固定选用1、2、5三个值乘以10的整数次幂，这是普通人读刻度时认知负担最小的间隔单位
• 用选定的步长分别对最小值向下取整、最大值向上取整，得到规整区间端点
• 最后修复JS浮点数计算精度问题，避免出现0.30000000004这类无效值

可直接复用的JS代码 #

function getAutoRange(min, max) {
  // 处理最值相等的异常场景
  if (min === max) {
    const buffer = Math.abs(min) < 1 ? 0.1 : Math.abs(min) * 0.1;
    return [min - buffer, max + buffer];
  }
  // 保证min小于max
  if (min > max) [min, max] = [max, min];

  const span = max - min;
  // 计算跨度对应的数量级
  const magnitude = Math.floor(Math.log10(span));
  const baseUnit = Math.pow(10, magnitude);
  // 选择适配的规整步长，可根据需要的区间宽松度调整阈值
  const ratio = span / baseUnit;
  let step;
  if (ratio <= 1.2) step = baseUnit;       // 跨度接近整量级就用基础单位
  else if (ratio <= 3) step = 2 * baseUnit; // 跨度偏小就用2倍单位
  else if (ratio <= 7) step = 5 * baseUnit; // 跨度中等用5倍单位
  else step = 10 * baseUnit;                // 跨度偏大就升一个数量级

  // 计算规整端点
  let begin = Math.floor(min / step) * step;
  let end = Math.ceil(max / step) * step;

  // 修复浮点数精度误差
  const decimalPlaces = Math.max(0, -magnitude);
  begin = Number(begin.toFixed(decimalPlaces));
  end = Number(end.toFixed(decimalPlaces));

  return [begin, end];
}

效果验证 #

传入你列出的测试用例，输出完全符合预期：

• getAutoRange(0, 45) → [0, 100]
• getAutoRange(0, 123) → [0, 200]
• getAutoRange(-45, 201) → [-100, 300]
• getAutoRange(-1, 1) → [-1, 1]
• getAutoRange(0.01, 0.06) → [0, 0.1]
• getAutoRange(-0.009, -0.004) → [-0.01, 0]
• getAutoRange(-0.8, 0.9) → [-1, 1]
• getAutoRange(-335, -12) → [-400, 0]

如果需要调整区间的宽松程度，只要修改步长选择的ratio阈值即可，比如想要更紧凑的区间就把步长选小一档，想要更宽松的留白就选大一档的步长，不需要改动核心逻辑。

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