【SwiftUI】Chartのスクロール位置を設定する

# はじめに
以前、Chartをスクロールできるようにしました。

https://qiita.com/SNQ-2001/items/d53fc016523137f57094

今回はChartのスクロール位置を設定できるようにしてみます。

## データ
```swift
import Foundation

struct Temperature {
    let day: Int
    let max: Double
    let min: Double
}
```

# 実装
### 初期位置のみ設定したい
```diff_swift
import SwiftUI
import Charts

struct ContentView: View {
    @State private var temperatures: [Temperature] = [
        .init(day: 1, max: 23, min: 13),
        .init(day: 2, max: 25, min: 10),
        .init(day: 3, max: 23, min: 11),
        .init(day: 4, max: 21, min: 11),
        .init(day: 5, max: 18, min: 12),
        .init(day: 6, max: 19, min: 13),
        .init(day: 7, max: 18, min: 15),
        .init(day: 8, max: 22, min: 9),
        .init(day: 9, max: 23, min: 10),
        .init(day: 10, max: 24, min: 13),
        .init(day: 11, max: 23, min: 13),
        .init(day: 12, max: 25, min: 10),
        .init(day: 13, max: 23, min: 11),
        .init(day: 14, max: 21, min: 11),
        .init(day: 15, max: 18, min: 12),
        .init(day: 16, max: 19, min: 13),
        .init(day: 17, max: 18, min: 15),
        .init(day: 18, max: 22, min: 9),
        .init(day: 19, max: 23, min: 10),
        .init(day: 20, max: 24, min: 13),
    ]
    
    private var initialXChartScrollPosition: Int = 10
    
    var body: some View {
        Chart {
            ForEach(temperatures, id: \.day) { temperature in
                LineMark(
                    x: .value("day", temperature.day),
                    y: .value("max", temperature.max)
                )
            }
        }
        .chartScrollableAxes(.horizontal)
        .chartXVisibleDomain(length: 5)
+       .chartScrollPosition(initialX: initialXChartScrollPosition) // 初期のスクロール位置を設定
        .frame(width: 300, height: 300)
    }
}
```

### 初期位置以外も設定したい
`xChartScrollPosition`が変更されるたびにChartのスクロール位置が変更されます。
```diff_swift
import SwiftUI
import Charts

struct ContentView: View {
    @State private var temperatures: [Temperature] = [
        .init(day: 1, max: 23, min: 13),
        .init(day: 2, max: 25, min: 10),
        .init(day: 3, max: 23, min: 11),
        .init(day: 4, max: 21, min: 11),
        .init(day: 5, max: 18, min: 12),
        .init(day: 6, max: 19, min: 13),
        .init(day: 7, max: 18, min: 15),
        .init(day: 8, max: 22, min: 9),
        .init(day: 9, max: 23, min: 10),
        .init(day: 10, max: 24, min: 13),
        .init(day: 11, max: 23, min: 13),
        .init(day: 12, max: 25, min: 10),
        .init(day: 13, max: 23, min: 11),
        .init(day: 14, max: 21, min: 11),
        .init(day: 15, max: 18, min: 12),
        .init(day: 16, max: 19, min: 13),
        .init(day: 17, max: 18, min: 15),
        .init(day: 18, max: 22, min: 9),
        .init(day: 19, max: 23, min: 10),
        .init(day: 20, max: 24, min: 13),
    ]
    
    @State private var xChartScrollPosition: Int = 10
    
    var body: some View {
        VStack {
            Chart {
                ForEach(temperatures, id: \.day) { temperature in
                    LineMark(
                        x: .value("day", temperature.day),
                        y: .value("max", temperature.max)
                    )
                }
            }
            .chartScrollableAxes(.horizontal)
            .chartXVisibleDomain(length: 5)
+           .chartScrollPosition(x: $xChartScrollPosition)  // スクロール位置を設定
            .frame(width: 300, height: 300)
            
            Stepper("\(xChartScrollPosition)", value: $xChartScrollPosition, in: 1...20)
        }
    }
}
```

# おわり
今回の例では、X軸のスクロールでしたが、
Y軸でスクロール位置を設定することもできます。

公式ドキュメントのリンクも載せているので確認してみてください

# 公式ドキュメント
https://developer.apple.com/documentation/swiftui/view/chartscrollposition(initialx:)

https://developer.apple.com/documentation/swiftui/view/chartscrollposition(initialy:)

https://developer.apple.com/documentation/swiftui/view/chartscrollposition(x:)

https://developer.apple.com/documentation/swiftui/view/chartscrollposition(y:)