Swift Charts自定义图表时间选择器：X轴标签适配问题求助

直接在LineMark的x参数中添加unit属性会导致日期被截断到指定单位的起始点，进而引发数据重叠、显示异常的问题——这个参数的作用是截断日期精度，而非调整轴标签的显示格式。要实现X轴标签随时间单位（日/月/年）动态适配，需要分开处理数据聚合（可选）和轴标签格式化两个环节：

1. 数据聚合（按需处理） #

如果你的原始数据是按日存储的，切换到月/年视图时，需要先将数据按对应单位聚合（比如求平均值或总和），避免X轴标签过于密集，同时保证数据展示逻辑合理：

假设你的数据模型为：

struct DataItem: Identifiable {
    let id = UUID()
    let day: Date
    let value1: Double
}

添加聚合函数：

func aggregatedData(for unit: Calendar.Component) -> [DataItem] {
    let calendar = Calendar.current
    // 按指定时间单位分组
    let groupedData = Dictionary(grouping: filteredData) { item in
        calendar.startOfDay(for: calendar.date(bySetting: unit, value: calendar.component(unit, from: item.day), of: item.day)!)
    }
    // 对每组数据计算平均值（可根据需求改为求和等）
    return groupedData.map { key, items in
        let avgValue = items.reduce(0) { $0 + $1.value1 } / Double(items.count)
        return DataItem(day: key, value1: avgValue)
    }.sorted { $0.day < $1.day }
}

2. 自定义X轴标签格式 #

通过chartXAxis修饰符自定义轴标签，根据选中的timeUnits动态切换日期显示格式：

@State private var timeUnits: Calendar.Component = .day // 选择器绑定的时间单位

ScrollView(.horizontal) {
    Chart {
        // 使用聚合后的数据（如果不需要聚合，直接用filteredData即可）
        ForEach(aggregatedData(for: timeUnits)) { item in
            LineMark(
                x: .value("Date", item.day),
                y: .value("Measurement", item.value1)
            )
            .foregroundStyle(Color(measurementType.colour1))
            .interpolationMethod(.catmullRom)
            .symbol(by: .value("Measurement Type", measurementType.name))
        }
    }
    .chartXAxis {
        AxisMarks(position: .bottom) { value in
            AxisGridLine()
            AxisTick()
            AxisLabel {
                guard let date = value.as(Date.self) else { return }
                let formatter = DateFormatter()
                // 根据时间单位切换标签格式
                switch timeUnits {
                case .day:
                    formatter.dateFormat = "MM/dd"
                case .month:
                    formatter.dateFormat = "yyyy-MM"
                case .year:
                    formatter.dateFormat = "yyyy"
                default:
                    formatter.dateFormat = "MM/dd/yyyy"
                }
                // 旋转标签避免横向滚动时重叠
                Text(formatter.string(from: date))
                    .rotationEffect(.degrees(45))
                    .padding(.top, 8)
            }
        }
    }
    .frame(height: 300) // 固定图表高度，避免滚动时高度异常
}

关键说明 #

• 若你的数据已经是按月/年预统计好的，可以跳过数据聚合步骤，直接使用原始数据并自定义轴标签格式。
• 旋转标签是为了提升横向滚动时的可读性，可根据实际需求调整旋转角度或移除该设置。
• 确保timeUnits与选择器的选项正确绑定，比如选择器的选项对应.day、.month、.year三个Calendar.Component值。

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