【SwiftUI】折れ線グラフのデータ補完を設定する

Posted at 2024-01-15

はじめに

折れ線グラフのデータ補完と言われてもわかりにくいと思うので、軽く説明します。

折れ線グラフって値のある箇所を線で繋いでいるので、実際には線のある箇所にはデータがない状態です。

その補完をどのように表示するのかを設定することができます。

サンプルアプリ

サンプルアプリの全体実装

import SwiftUI
import Charts

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

enum Interpolation: String, CaseIterable, Identifiable {
    case cardinal
    case linear
    case monotone
    case stepCenter
    case stepStart
    case stepEnd
    case catmullRom
    
    var id: String { rawValue }
    
    var method: InterpolationMethod {
        switch self {
        case .cardinal:
            InterpolationMethod.cardinal
        case .linear:
            InterpolationMethod.linear
        case .monotone:
            InterpolationMethod.monotone
        case .stepCenter:
            InterpolationMethod.stepCenter
        case .stepStart:
            InterpolationMethod.stepStart
        case .stepEnd:
            InterpolationMethod.stepEnd
        case .catmullRom:
            InterpolationMethod.catmullRom
        }
    }
}

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),
    ]
    
    @State var selectedInterpolation: Interpolation = .cardinal
    
    var body: some View {
        VStack {
            Picker("", selection: $selectedInterpolation) {
                ForEach(Interpolation.allCases) { interpolation in
                    Text(interpolation.rawValue).tag(interpolation)
                }
            }
            .pickerStyle(.wheel)
            
            Chart {
                ForEach(temperatures, id: \.day) { temperature in
                    LineMark(
                        x: .value("day", temperature.day),
                        y: .value("max", temperature.max)
                    )
+                   .interpolationMethod(selectedInterpolation.method)
                }
            }
            .frame(width: 300, height: 300)
        }
    }
}