SwiftUI iOS初始化图表后动态更新X轴及分页加载滚动异常问题

问题分析 #

你当前的代码尝试通过监听滚动位置扩展X轴范围，实现类似分页加载的效果，但更新xAxisRange时出现滚动位置跳变的问题——核心原因是修改轴域后，滚动位置的锚点逻辑发生了变化：原来的scrollPosition基于旧轴范围（0...50）计算，当范围扩展到0...100，Chart会重新计算坐标映射，导致原滚动位置对应的视觉位置偏移。

需求可行性 #

这类动态扩展数据范围的需求完全可行，只需调整实现逻辑，避免直接修改轴域时破坏滚动位置的连贯性。

修正方案 #

核心思路是：扩展轴范围前，记录当前滚动位置的相对比例；范围更新后，根据新轴域重新计算对应的绝对滚动位置，保持视觉连贯性。

修改后的代码示例：

import SwiftUI
import Charts

struct ContentView: View {
    @State private var numbers = (0..<100)
        .map { _ in Double.random(in: 0...100) }
    @State private var scrollPosition = 0
    @State var xAxisRange: ClosedRange<Int> = 0 ... 50
    // 标记是否已扩展范围，避免重复触发逻辑
    @State private var hasExpandedRange = false

    var body: some View {
        Chart(Array(zip(numbers.indices, numbers)), id: \.1) { index, number in
            LineMark(
                x: .value("Index", index),
                y: .value("Number", number)
            )
        }
        .chartScrollableAxes(.horizontal)
        .chartXScale(domain: xAxisRange)
        .chartScrollTargetBehavior(
            .valueAligned(
                unit: 5,
                majorAlignment: .page
            )
        )
        .chartScrollPosition(x: $scrollPosition)
        .onChange(of: scrollPosition) { oldValue, newValue in
            guard !hasExpandedRange else { return }
            
            if newValue > 30 {
                // 计算旧范围中当前滚动位置的相对比例
                let oldRangeLength = xAxisRange.upperBound - xAxisRange.lowerBound
                let scrollRatio = Double(newValue - xAxisRange.lowerBound) / Double(oldRangeLength)
                
                // 扩展轴范围
                xAxisRange = 0 ... 100
                hasExpandedRange = true
                
                // 根据新范围映射滚动位置，保持视觉不变
                let newRangeLength = xAxisRange.upperBound - xAxisRange.lowerBound
                scrollPosition = xAxisRange.lowerBound + Int(scrollRatio * Double(newRangeLength))
            }
        }
    }
}

关键说明 #

• 新增hasExpandedRange标记，防止范围扩展后重复触发逻辑
• 通过相对比例映射滚动位置，解决轴域变化导致的视觉跳变问题
• 如果是真实场景的动态加载（如网络请求追加数据），可先完成数据追加，再执行上述滚动位置修正逻辑

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