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

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

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

![スクリーンショット 2024-01-15 21.23.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/2c3151e3-9822-748d-dd42-6a096fae3f40.png)

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

# サンプルアプリ
![Simulator Screen Recording - iPhone 15 - 2024-01-15 at 21.20.42.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/0253958c-e502-451d-6162-1274337bb3a6.gif)

# サンプルアプリの全体実装
```diff_swift
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)
        }
    }
}
```

# 設定の種類と見た目
### cardinal
![スクリーンショット 2024-01-15 22.07.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/9d0f37b4-4114-9bc0-9eb2-9d4e9e4a3441.png)

### linear
![スクリーンショット 2024-01-15 22.07.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/e29cf281-c8e2-676a-0126-c7f0d23008c6.png)

### monotone
![スクリーンショット 2024-01-15 22.07.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/9ddc321b-1057-1fd1-b666-c0e4fc851757.png)

### stepCenter
![スクリーンショット 2024-01-15 22.08.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/223db215-c24f-3040-a1f2-4a4f798dea80.png)

### stepStart
![スクリーンショット 2024-01-15 22.08.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/4ee88121-95da-7c6b-5b90-55168699e134.png)

### stepEnd
![スクリーンショット 2024-01-15 22.08.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/cea08c53-e0e4-e052-8933-aff0257d1472.png)

### catmullRom
![スクリーンショット 2024-01-15 22.08.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/32d5e49c-5df1-019d-7353-95b06ee333c5.png)

# おわり
Chartsって出てきたばかりなのにめっちゃ機能充実してますよね

# 公式ドキュメント
https://developer.apple.com/documentation/charts/chartcontent/interpolationmethod(_:)

https://developer.apple.com/documentation/charts/interpolationmethod