[iOS - SwiftUI] 2. Swift Charts 사용 방법 (#주식 차트, 주가) - LineMark, RuleMark

1. Swift Charts 사용 방법 (#주식 차트, 주가) - BarMark

2. Swift Charts 사용 방법 (#주식 차트, 주가) - LineMark, RuleMark

LineMark와 RuleMark를 사용

Swift Chart 개념 (이전에 알아본 개념)

• iOS 16+에서 사용가능
• SwiftUI에서 제공하는 Chart를 사용하면 매우 쉽게 차트 그리기가 가능

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

LineMark 사용

• LineMark: 그래프에서 (x, y)좌표들을 연결해 놓은 주식 차트 같은곳에서 사용

• 예제에 사용할 Date 구조체 정의

struct Data {
    let name: String = "jake"
    let date: Date
    let value: Int
}

let datas = [
    Data(date: .now, value: 10),
    Data(date: .now.addingTimeInterval(5), value: 5),
    Data(date: .now.addingTimeInterval(15), value: 15),
    Data(date: .now.addingTimeInterval(30), value: 8),
    Data(date: .now.addingTimeInterval(50), value: 9),
]

• 차트 모듈 import 후 Chart 사용

import Charts

Chart {
    
}

• Chart블록 내부에서 ForEach문을 돌면서 .value에 일종의 ID와 값을 넣어서 구현

ForEach(datas, id: \.date) { item in
    LineMark(
        x: .value("Date", item.date),
        y: .value("Value", item.value)
    )
    .foregroundStyle(.blue)
}

• 차트에 관한 legend를 붙이고 싶은 경우에는 .foregroundStyle(by:) 사용

.foregroundStyle(by: .value("Some Category", item.name))

(전체 코드)

struct ContentView: View {
    let datas = [
        Data(date: .now, value: 10),
        Data(date: .now.addingTimeInterval(5), value: 5),
        Data(date: .now.addingTimeInterval(15), value: 15),
        Data(date: .now.addingTimeInterval(30), value: 8),
        Data(date: .now.addingTimeInterval(50), value: 9),
    ]
    
    var body: some View {
        Chart {
            ForEach(datas, id: \.date) { item in
                LineMark(
                    x: .value("Date", item.date),
                    y: .value("Value", item.value)
                )
                .foregroundStyle(by: .value("Some Category", item.name))
            }
        }

    }
}

RuleMark 사용

• RuleMark는 수평선 UI이므로 단순하게 Chart 블록 내부에 y좌표만 입력하면 쉽게 사용이 가능

RuleMark(
    y: .value("Threshold", 9.5)
)
.foregroundStyle(by: .value("Threshold", "Threshold"))

• shadow를 사용해 그림자 효과 부여

// LineMark, RuleMark에 아래 코드 추가

.shadow(color: .brown, radius: 3)

* 전체 코드: https://github.com/JK0369/ExLineMark

* 참고

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

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