计算线性刻度区间内指定数值对应百分比的方法

前置变量对齐 #

• 刻度起点数值：a = 10，对应百分比0%
• 刻度终点数值：c = 140，对应百分比100%
• 待计算的目标数值：以你给出的b = 200为例

核心计算逻辑 #

标准线性映射的百分比计算规则为：

百分比 = (目标数值 - 起点数值) / (终点数值 - 起点数值) * 100

如果需要限制百分比在0~100的合法区间，避免数值超出刻度范围时显示异常，可以额外增加边界判断：

• 计算结果小于0时，返回0
• 计算结果大于100时，返回100

JS代码实现 #

// 基准刻度值
const startVal = 10; // 对应变量a，刻度起点数值
const endVal = 140; // 对应变量c，刻度终点数值

/**
 * 计算指定数值在线性刻度上的百分比位置
 * @param {number} target 待计算的目标数值
 * @returns {number} 0~100区间的百分比值
 */
function getScalePercent(target) {
  const range = endVal - startVal;
  // 兼容起点终点数值相同的异常场景，避免除数为0
  if (range === 0) return 0;
  let percent = ((target - startVal) / range) * 100;
  // 边界限制，不需要可删除此行
  percent = Math.max(0, Math.min(100, percent));
  // 如需保留指定小数位可放开下方注释，示例为保留2位小数
  // percent = Number(percent.toFixed(2))
  return percent;
}

// 测试示例
console.log(getScalePercent(10)); // 输出 0（起点）
console.log(getScalePercent(75)); // 输出 50（中心点）
console.log(getScalePercent(140)); // 输出 100（终点）
console.log(getScalePercent(200)); // 输出 100（超出终点取边界值）

可选适配方案 #

如果你的刻度是反向显示（数值越大，UI位置越靠左/靠下），只需要修改返回值为 100 - percent 即可。

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