UIKit에서 Swift Charts Framework 사용하기

안녕하세요 :D 애플망고입니다🥭

이번에 새로운 앱을 개발하면서 그래프를 그릴 일이 있었는데요.DGCharts라이브러리를 사용하려고 했는데

제가 원하는 모양의 그래프가 없더라고요.그래서 Swift Charts Framework를 사용하게 되었습니다.

 

Swift Charts

import SwiftUI
import Charts

struct ChartView: View {
    var dailyPriceData: [DailyPriceData]
    
    var body: some View {
        Chart {
            ForEach(dailyPriceData) { data in
                BarMark(
                    xStart: .value("Price", data.minPrice),
                    xEnd: .value("Price", data.maxPrice + 1),
                    y: .value("Day", "\(data.day)")
                )
                .foregroundStyle(data.day.contains("☀️") ? Color.Chart.dayColor : Color.Chart.nightColor)
                .annotation(position: .trailing) {
                    Text(data.minPrice == data.maxPrice
                        ? "\(Int(data.minPrice))"
                        : "\(Int(data.minPrice)) - \(Int(data.maxPrice))")
                        .font(.caption)
                        .foregroundColor(.black)
                }
            }
        }
        .padding()
    }
}

Swift Charts를 쓰기 위해서는 먼저 SwiftUI와, Charts를 import 해주어야합니다.

저는 BarMark 형식을 이용해 가로 막대 그래프를 만들었습니다.

xStart : x의 시작점이고, 저는 최소값을 넣었습니다.

xEnd : x의 끝점이고, 저는 최대값을 넣었는데 , 데이터값에 +1을 해준 이유는 Start값과 End값이 같으면 아예 표시가 안되더라고요.

여기에 annotation을 추가해 최소, 최대 값을 표시해주었습니다.

 

 

UIKit에서 SwiftUI 사용하기

// UIHostingController를 사용하여 SwiftUI View(ChartView)를 포함
let hostingController = UIHostingController(rootView: ChartView(dailyPriceData: dailyPriceData))

// UIHostingController를 현재 VC의 자식 VC로 추가
addChild(hostingController)

view.addSubview(hostingController.view)

hostingController.view.frame = view.frame

// UIHostingController가 부모 뷰 컨트롤러에 추가됨을 알림
hostingController.didMove(toParent: self)

 

UIHostingController를 사용해 UIKit에 SwiftUI View를 통합할 수 있습니다.

먼저 UIHostingController(rootView:)를 사용하여 SwiftUI 뷰인 ChartView를 UIKit에서 사용할 수 있게 만들었습니다.

addChild와 didMove(toParent:)를 사용해 UIHostingController의 생명주기가 부모와 동기화되도록 만들었습니다.

 

 

결과