SwiftUI Chart日期类型X轴标签与数据错位问题求助

问题根源 #

核心问题出在轴标签数据源与数据分段数据源不一致，加上日期单位、对齐逻辑的不匹配：

• 若chartData过滤了count为0的分段，直接用chartData.map { $0.date }作为轴标签数据源，会导致标签数量少于实际时间分段数，引发错位。
• 日期精度或单位不匹配，比如分段日期是整点但统计数据带秒数，会让BarMark的位置与轴标签产生偏移。

修复步骤 #

1. 统一时间分段的数据源

在ViewModel中保存完整的时间分段日期数组（包含所有count为0的分段），确保轴标签和数据使用同一套分段基准：

class InformationViewModel: ObservableObject {
    @Published var displayRange: ChartDisplayRange = .day
    @Published var chartData: [DisplayData] = []
    @Published var intervalDates: [Date] = [] // 新增：保存完整分段日期
    
    func updateChartData() {
        // 1. 先生成完整的时间分段数组
        let component = displayRange.calendarComponent // 比如.day对应.hour，.year对应.month
        intervalDates = dateRange.datesForIntervalWith(step: 1, on: component)
        
        // 2. 基于分段数组统计生成chartData（保留所有分段，包括count为0的）
        chartData = intervalDates.map { date in
            let count = calculatePositionCount(for: date, interval: component)
            return DisplayData(date: date, count: count)
        }
    }
}

2. 修正X轴标记的数据源

使用ViewModel中保存的intervalDates作为轴标签的数据源，确保标签数量和位置与数据分段完全匹配：

.chartXAxis {
    AxisMarks(values: informationVM.intervalDates) { dateMark in
        let date = informationVM.intervalDates[dateMark.index]
        switch informationVM.displayRange {
        case .day:
            AxisValueLabel(format: Date.FormatStyle().hour().day(), collisionResolution: .greedy)
        case .week, .month:
            AxisValueLabel(format: Date.FormatStyle().day(), collisionResolution: .greedy)
        case .year:
            AxisValueLabel(format: Date.FormatStyle().month(.narrow), collisionResolution: .greedy)
        default:
            AxisValueLabel(format: Date.FormatStyle().month(.narrow).year(), collisionResolution: .greedy)
        }
    }
}

3. 对齐BarMark与轴单位

确保BarMark的X轴单位与当前displayRange完全对应，让每个bar准确占据对应时间区间：

BarMark(
    x: .value("Date", data.date, unit: informationVM.displayUnit),
    y: .value("Tiles", data.count)
)
.foregroundStyle(.purple.gradient)

比如.day模式下displayUnit设为.hour，.year模式下设为.month

4. 调整标签对齐逻辑

移除centered: true参数，让轴标签默认对齐到每个bar的底部中心，避免强制居中导致的偏移：

// 错误写法
AxisValueLabel(format: ..., centered: true, collisionResolution: .greedy)

// 修正后
AxisValueLabel(format: ..., collisionResolution: .greedy)

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