[TIL] Charts 적용기

적용 배경

처음 SwiftUI Charts 프레임워크를 활용하여 그래프를 그리려고 하였습니다.

하지만 제가 프로젝트 최소 버전을 iOS15로 설정해 두었기 때문에 iOS16이상에서만 사용가능한 Charts 프레임워크 버전 호환 이슈롤 불가능해보였습니다. 따라서 UIKit 기반으로 구성되어 있는 DGCharts 라이브러리를 대신 사용하였습니다.

 

SwiftUI에서 UIKit 적용

우선 DGCharts는 UIKIt 기반으로 구성되어있기 때문에 SwiftUI의 View Life Cycle에 속하게 하기 위해선 다음과 같은 과정을 거처야 합니다.

• UIViewRepresentable 프르토콜을 준수하는 구조체를 하나 선업합니다.

UIViewRepresentable 프로토콜은 UIKit의 UIView 타입을 SwiftUI의 계층구조에 속할 수 있도록 도와주는 역할을 해줍니다.

 

• makeUIView(context:) 메서드를 통해 UIView를 정의해줍니다.
• 만약 SwiftUI 업데이트 주기마다 UIView를 업데이트시키고 싶을 때, updateUIView(_:context:) 메서드를 통해 업데이트 시켜줍니다.

 

전체 코드

import DGCharts
import SwiftUI

struct ChartView: UIViewRepresentable {
    
    let entries: [ChartDataEntry]
    
    func makeUIView(context: Context) -> LineChartView {
        let lineChartView = LineChartView()
        lineChartView.rightAxis.enabled = false
        lineChartView.leftAxis.enabled = false
        lineChartView.xAxis.enabled = false
        lineChartView.legend.enabled = false
        return lineChartView
    }
    
    func updateUIView(_ uiView: LineChartView, context: Context) {
        let dataSet = LineChartDataSet(entries: entries)
        
        dataSet.drawCirclesEnabled = false
        dataSet.mode = .cubicBezier
        dataSet.lineWidth = 3
        dataSet.setColor(.brandPoint)
        dataSet.drawHorizontalHighlightIndicatorEnabled = false
        dataSet.highlightColor = .brandPoint
        
        let gradientColors: [CGColor] = [
            UIColor.brandPoint.cgColor,
            UIColor.customWhite.cgColor
        ]
        let gradient =  CGGradient(colorsSpace: nil, colors: gradientColors as CFArray, locations: nil)!
        dataSet.fill = LinearGradientFill(gradient: gradient, angle: 270)
        dataSet.fillAlpha = 1
        dataSet.drawFilledEnabled = true
        
        // 차트 뷰에 차트 데이터 추가
        let data = LineChartData(dataSet: dataSet)
        data.setDrawValues(false)
        uiView.data = data
        uiView.pinchZoomEnabled = true
    }
}

 

참고 사이트

https://developer.apple.com/documentation/swiftui/uiviewrepresentable (애플 공식 문서 - UIViewRepresentable)

https://www.youtube.com/watch?v=mWhwe_tLNE8&list=PL_csAAO9PQ8bjzg-wxEff1Fr0Y5W1hrum&index=6

https://www.youtube.com/watch?v=csd7pyfEXgw (DGCharts 적용법)