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

はじめに

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

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

データ

import Foundation

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

実装

初期位置のみ設定したい

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のスクロール位置が変更されます。

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軸でスクロール位置を設定することもできます。

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

公式ドキュメント