SwiftUI Charts如何默认滚动到数据末尾显示90天范围？

要让SwiftUI Chart默认显示最后90天数据，你可以通过绑定X轴可见范围的状态变量实现，具体步骤如下：

1. 添加@State变量控制X轴可见区间，初始值设为nil，后续在视图加载时计算赋值：

@State private var visibleXRange: ClosedRange<Int>?

2. 修改chartXScale配置，优先使用visibleXRange，无值时 fallback 到完整数据范围：

.chartXScale(domain: visibleXRange ?? (dataArray.map { $0.daysSince1970 }.min()!)...(dataArray.map { $0.daysSince1970 }.max()!))

3. 在onAppear回调中计算最后90天的区间：取最大的daysSince1970值，减去90作为起始，最大值作为结束：

.onAppear {
    guard let maxDays = dataArray.map({ $0.daysSince1970 }).max() else { return }
    visibleXRange = (maxDays - 90)...maxDays
}

完整修改后的代码如下：

import SwiftUI
import Charts

struct ContentView: View {
  
  var id: UUID = UUID()
  @State private var visibleXRange: ClosedRange<Int>? // 新增状态变量
  
//test data
  @State private var dataArray:[Data] = {
    var array:[Data] = []
    array.append(Data(date: Date()))
    let calendar = Calendar.current
    for count in 1...1000{
      var currDate = array.last?.date ?? Date()
      var nextDate = calendar.date(byAdding: .day, value: -7, to: currDate)
      array.append(Data(date: nextDate!))
    }
    return array
  }()
  
  var body: some View {
      Chart(dataArray) { data in
        LineMark(
          x: .value("Number", data.daysSince1970),
          y: .value("Value", data.value)
        )
      }
    .chartScrollableAxes(.horizontal)
    .chartXVisibleDomain(length: 90)
    .chartXScale(domain: visibleXRange ?? (dataArray.map { $0.daysSince1970 }.min()!)...(dataArray.map { $0.daysSince1970 }.max()!))
    .onAppear { // 计算初始可见范围
        guard let maxDays = dataArray.map({ $0.daysSince1970 }).max() else { return }
        visibleXRange = (maxDays - 90)...maxDays
    }
  }
}

#Preview {
  ContentView()
}

struct Data: Identifiable {
  
  var id:UUID = UUID()
  
  public var date: Date
  public var value: Int
  public var daysSince1970: Int
  
  init(date: Date) {
    
    self.date = date
    self.value = Int.random(in: 1...10)
    
    daysSince1970 = Int(date.timeIntervalSince1970 / 86400)
    
  }
  
}

原理说明 #

• visibleXRange状态变量动态控制X轴可见区间，初始加载时设置为最后90天范围，让图表默认显示最新数据
• chartXVisibleDomain(length:90)保证滚动时始终保持90天的可见长度
• 滚动操作会自动更新visibleXRange的值，向左滚动即可查看更早的数据

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