数组中time1与time2重叠时如何实现time2的图示展示效果

核心逻辑 #

遍历存储时间的数组，对每个待渲染的时间段，判断其与已渲染的时间段是否存在时间重叠，若存在重叠则将当前时间段的垂直偏移量累加，直到无重叠后再进行渲染。

实现步骤 #

• 预处理时间数组，将每个时间段的start和end转换为可比较的时间戳格式，方便后续重叠判断
• 初始化已渲染时间段的层级映射列表，记录每个偏移层级下已有的时间段范围
• 遍历待渲染的时间段数组：
  • 初始化当前时间段的垂直偏移为0
  • 对比当前时间段与当前偏移层级下所有已渲染时间段，判断是否满足当前start < 已有end && 当前end > 已有start的重叠条件
  • 若存在重叠则将偏移值+1，重复上述判断直到找到无重叠的层级
  • 记录当前时间段的偏移值后进入下一个时间段的计算

代码示例（JS版本） #

// 原始时间数组示例，存储所有时间段数据
const timeArray = [
  { id: 'time1', start: '2024-05-01 08:00', end: '2024-05-01 12:00' },
  { id: 'time2', start: '2024-05-01 10:00', end: '2024-05-01 14:00' }
]

// 时间转时间戳工具函数
const getTimeStamp = (timeStr) => new Date(timeStr).getTime()

// 计算每个时间段的垂直偏移
const calcTimeOffset = (arr) => {
  const result = []
  const renderedGroups = [] // 存储每个偏移层级的已有时间段
  arr.forEach(item => {
    const currentStart = getTimeStamp(item.start)
    const currentEnd = getTimeStamp(item.end)
    let offset = 0
    // 查找可放置的最小偏移层级
    while(true) {
      if (!renderedGroups[offset]) {
        renderedGroups[offset] = []
        break
      }
      // 判断当前层级是否有重叠
      const hasOverlap = renderedGroups[offset].some(rendered => {
        return currentStart < rendered.end && currentEnd > rendered.start
      })
      if (!hasOverlap) break
      offset++
    }
    renderedGroups[offset].push({ start: currentStart, end: currentEnd })
    result.push({ ...item, offset })
  })
  return result
}

// 渲染时根据offset调整元素的top/transform垂直位置即可
const processedArray = calcTimeOffset(timeArray)

渲染说明 #

根据你使用的技术栈（Vue/React/原生JS等），在渲染时间段元素时，给元素设置对应offset * 单个时间段高度的上偏移即可实现错位效果，避免时间段重叠无法查看。

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