【SwiftUI】Charts를 사용하여 선 그래프 표시

소개

이번에는 SWiftUI를 사용하여 선 그래프를 표시하고 싶습니다. (엄격하게는 SWiftUI에서 UIView를 사용합니다)
사용할 라이브러리는 Charts입니다.

1. 만든 것

이 기사의 코드를 사용하여 이러한 그래프를 표시할 수 있습니다.

2. 라이브러리 가져오기

CocoaPod에서 라이브러리를 소개합니다.
먼저 프로젝트 디렉토리에서 pod init
그런 다음 Podfile에 pod 'Charts'를 추가하여 pod install
그리고는 프로젝트내에서 import Charts 라고 하면 사용할 수 있게 됩니다.

3.SwiftUI에서 UIView 사용

Charts 라이브러리입니다만, SwiftUI에는 대응하고 있지 않고, 종래의 UIKit의 라이브러리가 됩니다.

그 때문에 사용하기 위해서는 SwiftUI로 랩 할 필요가 있습니다.

SwiftUI 만 만져 본 적이 난이 시점에서? ? ? 하지만,
조사해보고 왠지 알고 왔습니다.

UIViewRepresentable 프로토콜

UIKit 클래스를 래핑하려면 UIViewRepresentable 프로토콜을 사용합니다.

래퍼 클래스(구조체?)의 LineChart를 작성합니다. (여기 이름은 자유입니다)
그리고 LineChartView 라는 것이 이번 랩 대상 클래스입니다.

struct LineChart : UIViewRepresentable {
    func makeUIView(context: Context) -> LineChartView {
       // ここでViewが作られるイメージ
    }

    func updateUIView(_ uiView: LineChartView, context: Context) {
       // 値が更新された時に呼び出される処理
    }

}

또한 UIViewRepresentable 프로토콜은 makeUIView 함수와 updateUIView 함수 구현이 필수입니다.
makeUIView 로 표시하는 View가 만들어지는 이미지updateUIView 에서는 값이 갱신되었을 때에 불려 가는 처리를 기입합니다. 예를 들어 숫자를 추가했을 때 그것을 동적으로 그래프에 반영할 때 사용합니다. 이번에는 거기까지 구현하지 않습니다.

구현

여기가 전문입니다. makeUIView의 개소가 메인이 됩니다.
dataSet을 data에 넣어 data를 차트에 반영한다.
그냥 그렇기 때문에 거기까지 복잡한 내용이 아닙니다.

import SwiftUI
import Charts

struct LineChart : UIViewRepresentable {
    func updateUIView(_ uiView: LineChartView, context: Context) {
        // update
    }

    func makeUIView(context: Context) -> LineChartView {
        // グラフに表示する要素
        let lineChartEntry : [ChartDataEntry] = [
            ChartDataEntry(x: 0, y: 0),
            ChartDataEntry(x: 1, y: 1),
            ChartDataEntry(x: 2, y: 2),
            ChartDataEntry(x: 3, y: 3),
            ChartDataEntry(x: 4, y: 4),
            ChartDataEntry(x: 5, y: 5),
        ]

        let chart = LineChartView()
        let data = LineChartData()
        let dataSet = LineChartDataSet(entries: lineChartEntry)

        // データセットを作ってチャートに反映
        data.addDataSet(dataSet)
        chart.data = data

        return chart
    }
}

struct ContentView: View {
    var body: some View {
        LineChart()
    }
}

결론

안전 SwiftUI에서 Charts를 사용할 수있었습니다!
다음 번에는 값을 동적으로 그래프에 반영하는 방법과 그래프의 모양을 사용자 정의하는 방법을 게시하고 싶습니다.