如何计算对象属性的数值占比并替换原属性值用于地图展示

核心逻辑 #

1. 遍历原始数组的每个对象元素
2. 过滤排除date属性，对剩余所有属性的数值求和
3. 逐个计算每个属性值占总和的百分比，按需求取整后替换原有属性值，同时保留date属性

代码实现（JavaScript） #

// 后端返回的原始数据
const originData = [
  {
    "date": "26/08/2021",
    "walking": 965.2107,
    "running": 964.0539,
    "sleeping": 962.1473,
    "swimming": 961.8081,
    "studying": 961.5081,
  }
]

// 转换处理函数
const calcPercentage = (data) => {
  return data.map(item => {
    // 提取所有非date的属性名
    const attrKeys = Object.keys(item).filter(key => key !== 'date')
    // 计算所有属性值总和
    const totalValue = attrKeys.reduce((acc, key) => acc + item[key], 0)
    // 组装返回结果
    const resultItem = { date: item.date }
    attrKeys.forEach(key => {
      // 计算百分比取整，需要保留小数可修改取整规则
      resultItem[key] = Math.round((item[key] / totalValue) * 100)
    })
    return resultItem
  })
}

// 调用得到目标结果
const targetData = calcPercentage(originData)

可选调整说明 #

• 若需要百分比总和严格为100，可修改取整逻辑，避免四舍五入导致的总和偏差
• 若需要保留指定小数位，可将Math.round替换为toFixed(小数位数)，示例：保留1位小数写为Number(((item[key] / totalValue) * 100).toFixed(1))

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