如何让Swift Charts的LineMark图表默认右对齐？

问题场景 #

当设置的X轴定义域（比如一年跨度）大于实际数据的时间范围（比如仅最近2-3个月有数据）时，默认LineMark图表会左对齐显示，希望实现类似苹果健康APP的右对齐效果——让最新数据贴合图表右侧，左侧留空对应未填充数据的时间范围。

解决思路 #

核心是动态计算X轴的定义域：将图表右侧固定为当前日期（或数据的最新日期），左侧根据选择的时间跨度（天/周/月等）往前推算，同时确保数据的最早日期不会超出这个计算出的定义域范围（如果数据更早，自动扩展左侧边界）。再结合滚动定位，确保初始视图停在最新数据一侧。

修改后的关键代码 #

主要调整MedicalDataChart.swift中的X轴相关设置：

// MedicalDataChart.swift

import SwiftUI
import Charts

struct MedicalDataChart: View {
    @Binding var dataType: DataType
    @Binding var timeUnit: DataTimeUnit
    
    var startOfDay = Calendar.current.startOfDay(for: Date())
    var endOfDay = Calendar.current.date(byAdding: .day, value: 1, to: Calendar.current.startOfDay(for: Date()))
    
    // 动态计算X轴定义域的起始日期
    var calculatedStartDate: Date {
        // 获取数据中的最早日期（无数据时默认取当前日期）
        let earliestDataDate = dataType.data.min(by: { $0.date < $1.date })?.date ?? startOfDay
        // 根据选择的时间跨度计算的起始日期
        let spanStartDate = Calendar.current.date(byAdding: .day, value: -timeUnit.rawValue, to: startOfDay)!
        // 取两者中更早的那个，确保所有数据都能显示，同时满足跨度要求
        return min(earliestDataDate, spanStartDate)
    }
    
    var body: some View {
        Chart {
            ForEach(dataType.data) { measure in
                LineMark(
                    x: .value("Date", measure.date, unit: .day),
                    y: .value("Value", measure.value)
                )
                .symbol(.circle)
                .interpolationMethod(.catmullRom)
                .foregroundStyle(Color("ContrastColor"))
            }
        }
        .chartScrollableAxes(.horizontal)
        // 设置初始滚动位置到最新日期区域
        .chartScrollPosition(initialX: endOfDay!)
        // 动态设置X轴定义域：从计算出的起始日期到当前日期的次日
        .chartXScale(domain: calculatedStartDate...endOfDay!)
        .chartXVisibleDomain(length: timeUnit.visibleDomain)
        .chartYScale(domain: .automatic(includesZero: true))
        .padding(.horizontal)
        .padding(.bottom)
    }
}

#Preview {
    MedicalDataChart(
        dataType: .constant(DataType(
            id: 1,
            name: "Weight",
            unit: "kg",
            data: [
                AnimalData(id: 1, value: 28, date: Date(from: "2024-10-02")),
                AnimalData(id: 1, value: 20, date: Date(from: "2024-11-02")),
                AnimalData(id: 1, value: 25, date: Date(from: "2024-12-02")),
                AnimalData(id: 1, value: 24, date: Date())
            ]
        )),
        timeUnit: .constant(DataTimeUnit.month)
    )
}

关键调整说明 #

1. 动态起始日期计算：新增calculatedStartDate，对比数据最早日期和时间跨度对应的起始日期，取更小值，既保证显示设定的时间跨度，又不会截断已有数据。
2. 固定右侧边界：将X轴定义域的结束日期固定为endOfDay（当前日期的次日），确保最新数据始终贴合图表右侧。
3. 初始滚动定位：通过chartScrollPosition(initialX: endOfDay!)让图表初始时直接滚动到右侧的最新数据区域。

额外优化提示 #

• 若不需要横向滚动，可移除.chartScrollableAxes(.horizontal)和.chartScrollPosition，仅靠chartXScale的domain设置就能实现右对齐。
• 若要让X轴刻度完全匹配设定的时间跨度（比如显示过去30天的刻度，即使数据只有最近10天），可以自定义AxisMarks生成固定间隔的刻度，不受数据范围影响。

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