SwiftUI 4.0 - Charts

안녕하세요. 그린입니다🟢

드디어...!!!!! SwiftUI 4.0이 나왔네요ㅎㅎ

이번 SwiftUI 4.0에서는 제가 생각할때는 정말 장족의 발전을 했다고 생각합니다🙌

특히 네비게이션도 그렇고.. 네비게이션도...... 그렇고.....

무튼! 오늘의 주제는 SwiftUI 4.0에서 새로 나온 API인 Charts를 소개해볼까 합니다🙋🏻

 

SwiftUI 4.0에서 많은 기술들이 도입되었고 변경된 부분도 많습니다.
이에 한 포스팅에서 다 다루는것보다 하나씩 조금 디테일하게 다뤄보기 위해 포스팅을 나누겠습니다👏

 

Charts?

차트가 뭘까요?

다들 아시는 그거입니다ㅋㅋ

차트나 그래프 등 수치를 가지고 어떠한 지표를 도식화해 보여주는것을 말하죠.

기존에 우리는 차트를 그리려면 정말 쌩으로 Path를 주고 일일히 다 그려주던가 아니면 외부 라이브러리의 도움을 받았어요.

아마도 가장 유명한 라이브러리는 이름도 동일한 Charts이지 않을까 합니다.

https://github.com/danielgindi/Charts

GitHub - danielgindi/Charts: Beautiful charts for iOS/tvOS/OSX! The Apple side of the crossplatform MPAndroidChart.

이번에 애플에서 새로 만들어준 Charts가 거의 이 라이브러리를 그대로 사용하기 쉽게 만들었다해도 과언이 아닐 정도더라구요..!

 

그럼 한번 당장! 어떻게 사용하는지 알아보시죠ㅎㅎ

 

Xcode 14 베타 받기

우선 Charts는 iOS 16 이상만 지원이 되죠.

우리는 해당 차트를 사용해보기 위해 현재 베타로 풀려있는 Xcode 14를 다운 받아야합니다.

참고로 Xcode 14 다운을 위해서는 macOS가 몬터레이 12.4 이상 이여야합니다.

(현재 12.4가 최신)

무튼 해당 환경 설정이 되었으면 아래 엑코 베타 다운로드 페이지로 이동해 다운해주면 됩니다!

얼마 안걸려요ㅎㅎ

https://developer.apple.com/download/applications/

로그인 - Apple

 

애플의 Charts 공식문서

애플에서 소개하는 차트는 데이터를 유익한 시각화로 변환하기 위한 SwiftUI 프레임워크라고 해요.

최소한의 코드로 효과적이고 커스터마이징한 차트를 만들 수 있습니다.

요런것들을 말이죠!

위에서도 보시다시피 차트를 사용해 데이터 패턴 및 추세를 전달하는 여러가지 방법이 있습니다.

좌측부터 꺾은선형, 막대형, 산점도 등 다양하게 있습니다.

또한 장점은 지역화와 접근성 기능을 지원합니다.

차트에 애니메이션을 추가해 동적으로도 만들 수 있어요!

 

Charts 사용해보기

자 우선 기본적 사용 폼은 아주 쉽습니다.

아래 막대형으로 만든 차트를 예시로 보시죠!

import Charts
import SwiftUI

// 밑에서 쭉 설명할 Marks에 대해서도 동일한 Postings 데이터 적용
struct Posting: Identifiable {
  let name: String
  let count: Int
  
  var id: String { name }
}

let postings: [Posting] = [
  .init(name: "Green", count: 250),
  .init(name: "James", count: 100),
  .init(name: "Tony", count: 70)
]

// 차트 그리기
struct BarChartView: View {
  var body: some View {
    Chart {
      ForEach(postings) { posting in
        BarMark(
          x: .value("Name", posting.name),
          y: .value("Posting", posting.count)
        )
      }
    }
  }
}

요래요.

쉽게 말해 Chart라는 뷰 안에 속성을 넣어주는것입니다.

어떤 형태의 차트를 그릴지를 정해주고 x축과 y축 외에 프로퍼티들을 첨가해주면 되죠.

그럼 어떤 형태로 그릴 수 있는지 한번 보자구요!

 

Marks & Properties

우선 위에서 설명했듯 차트에서 소개하는 핵심은 Marks와 Properties입니다.

즉  Marks로 어떤 형태의 차트를 그릴지 정해줍니다.

그 다음 Properties 속성들로 커스텀하게 구현해줍니다.

 

보시면 총 6개의 Marks와 6개의 Properties로 이뤄져있습니다.
바로 이어서 여러 형태의 Marks를 하나씩 알아보면서 Properties들도 어떻게 되는지 같이 파악해보겠습니다.

 

Charts의 Marks 종류

1. Bar

막대형으로 나타납니다.

위에서 본 코드와 같으며 모양은 이렇습니다.

x축과 y축을 바꿔주면 수평적이게 나타낼 수 있어요.

물론 이렇게 가로로도 자동으로 문제 없구요!

 

2. Point

점형 차트를 나타냅니다!

struct PointChartView: View {
  var body: some View {
    Chart {
      ForEach(postings) { posting in
        PointMark(
          x: .value("Posting", posting.count),
          y: .value("Name", posting.name)
        )
      }
    }
  }
}

 

3. Line

선형 차트로 나타내줍니다.

struct GraphChartView: View {
  var body: some View {
    Chart {
      ForEach(postings) { posting in
        LineMark(
          x: .value("Name", posting.name),
          y: .value("Posting", posting.count)
        )
        .foregroundStyle(Color.red)
      }
    }
  }
}

여기서 보시다시피 색상 프로퍼티를 지정해줄 수 있습니다.

또한 이렇게 아래와 같이 symbol 프로퍼티를 지정해줄수도 있습니다.

struct GraphAndSymbolChartView: View {
  var body: some View {
    Chart {
      ForEach(postings) { posting in
        LineMark(
          x: .value("Name", posting.name),
          y: .value("Posting", posting.count)
        )
        .symbol(by: .value("Name", posting.name))
      }
    }
  }
}

 

4. Area

영역으로 차트를 나타내줍니다.

struct AreaChartView: View {
  var body: some View {
    Chart {
      ForEach(postings) { posting in
        AreaMark(
          x: .value("Name", posting.name),
          y: .value("Posting", posting.count)
        )
      }
    }
  }
}

 

5. Rule

단일선으로 차트를 나타내줍니다.

선의 시작점과 끝점을 지정해줄 수 있어요.

x, y축 모두 start와 end 지점을 가질 수 있어 커스텀하게 구현이 가능합니다.

struct RuleMarkChartView: View {
  var body: some View {
    Chart {
      ForEach(postings) { posting in
        RuleMark(
          xStart: .value("Posting", posting.count),
          xEnd: .value("Posting", posting.count + 20),
          y: .value("Name", posting.name)
        )
      }
    }
  }
}

 

6. Rectangle

사각형으로 차트를 그려줍니다.

struct RectangleMarkChartView: View {
  var body: some View {
    Chart {
      ForEach(postings) { posting in
        RectangleMark(
          x: .value("Name", posting.name),
          y: .value("Posting", posting.count)
        )
      }
    }
  }
}

 

마무리

와우... 진짜 감격

차트를 지원해주다니요..!

이 맛에 애플하고 스유합니다🙌

정말 쓰기 쉽고 왠만한 커스터마이징은 다 될것 같아요.

iOS 16부터 쓸 수 있어서 현업에서 바로 도입은 못하겠지만...

그래도 너무 좋네요🥳

참고자료에 제가 위에 코드들로 놀아본 레포를 링크로 공유드립니다ㅎㅎ

 

[참고자료]

https://github.com/GREENOVER/playground/tree/main/SwiftUI4.0

GitHub - GREENOVER/playground: 학습을 하며 간단한 예제들을 만들어 보는 작고 소중한 놀이터

https://developer.apple.com/videos/play/wwdc2022/10136/

Hello Swift Charts - WWDC22 - Videos - Apple Developer

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

Apple Developer Documentation