Chart

오늘은 팀 프로젝트에서 사용할 Chart에 대해서 알아보기 위해 WWDC2022와 공식 문서를 참고하여 공부를 해보았다. 

 

---

1.  Chart란?

Swift Charts는 데이터를 시각화로 변환하기 위한 강력한 SwiftUI의 프레임 워크로 사용자 지정 차트를 만들어 보다 쉽게 사용자에게 데이터를 제공할 수 있다. 

위의 그림과 같이 선, 막대, 산점도 등 다양하게 만들 수 있다.

 

 

여기서 각각의 차트의 요소를 Mark라고 부른다. 이미지의 중앙에 있는 막대 차트에서의 각각의 막대 하나하나가 Mark이다. Mark는 데이터를 나타내는 그래픽 요소로 사용된다. 

 

---

 

2.  사용법

 

차트를 사용하기에 앞서 시각화하려는 정보를 PetShape이라는 구조체로 만들어 보자.

struct PetShape: Identifiable {
    var type: String
    var count: Double
    var id = UUID()
}

 

그런 다음 ToyShape 구조의 배열을 초기화하여 테이블의 데이터를 저장한다.

 

struct BarChart: View {
    var data: [PetShape] = [
        .init(type: "Dog", count: 5),
        .init(type: "Cat", count: 4),
        .init(type: "Fish", count: 4)
    ]

 

Chart를 사용하는것에 있어서 다른 뷰들과 크게 다른 점은 없고 내부에 각 요소에 대한 속성값을 지정해 주면 사용할  수 있다.  

import SwiftUI
import Charts

struct BarChart: View {
    var body: some View {
        Chart {
            BarMark(
                   x: .value("Shape Type", data[0].type),
                   y: .value("Total Count", data[0].count)
               )
            .foregroundStyle(.yellow)
               BarMark(
                    x: .value("Shape Type", data[1].type),
                    y: .value("Total Count", data[1].count)
               )
               BarMark(
                    x: .value("Shape Type", data[2].type),
                    y: .value("Total Count", data[2].count)
               )
        }

 

이런 식으로 간단하게 데이터를 시각화할  수 있게 된다. 그럼 그려지는 뷰는 아래 이미지처럼 그려지게 된다. 

 

x축에서는 구조체 배열에서의 1번째 요소부터 3번째 요소까지 각각의 타입이 출력되어있고, y축에는 x축과 동일하게 해당 요소에 대한 count값이 출력되어 차트를 그려주는 원리이다. 그렇다면 여기서 하나 궁금해지는 것이 생기는데 차트를 ForEach를 이용해서 반복적인 데이터를 더 쉽게 코드를 짤 수 없을까? 가능하다!

Chart {
    ForEach(data) { shape in
        BarMark(
            x: .value("Shape Type", shape.type),
            y: .value("Total Count", shape.count)
        )
    }
}

길게 나열된 코드들은 반복문을 사용하여 다음과 같이 쉽게 코딩을 할 수 도 있다. 

 

 

---

 

3. Mark Type

그렇다면 막대형 차트 말고 다른 모양의 차트는 어떻게 하면 확인할 수 있을까? 그럼 먼저 차트의 종류에 대해서 먼저 간단하게 알아보자.

우리가 위에서 많이 보았던 막대형 Mark부터 선, 점, 영역, 괘선 및 직사각형까지 다양하게 제공해주고 있다. 

 

Mark의 종류를 알았다면 위에서 사용한 데이터를 이용하여 다른 모양의 차트를 그려보자. 

 Chart {
            ForEach(data) { shape in
                LineMark(
                    x: .value("Shape Type", shape.type),
                    y: .value("Total Count", shape.count)
                )
            }

 

대표적으로 Linemark로 변경하여 실험 해보았다.

 

BarMark에서 LineMark로 변경해 주니 아주 간단하게 차트의 모양이 달라졌다. 말 그대로 데이터는 그대로 두고 Barmark 자리에 원하는 모양의 Mark를 대입해 주면 아주 쉽게 변하는 것을 확인할 수 있다.

 

그런데 여기서 RuleMark의 경우 한 가지 다른 것이 있는데 이 친구의 경우 다른 친구들과는 다른 게 x, y축을 사용하는 것이 아니라 x 축만을 사용하거나 y축만을 사용해서 차트에 수평 또는 수직의 선을 하나 더 추가해 준다고 생각하면 편할 것 같다. 언제 이것을 사용하면 좋을지 실습해 보니 단독으로 사용하는 것보단 다른 차트들과 함께 사용하여 기준치를 제공할 때 새로운 선을 표현하고 싶을 때 사용하면 좋을 것 같다. 아래 이미지와 코드가 그에 대한 예시이다. 

Chart {
    ForEach(data) { shape in
       BarMark(
            x: .value("Shape Type", shape.type),
             y: .value("Total Count", shape.count)
              )
        }
         RuleMark(y: .value("Break Even Threshold", 3))
                .foregroundStyle(.red)
        }
    }
}

기존의 Barmark에서 추가적으로 가운데 Rulemark를 그려보았다.

 

 

---

4. 기타 설정

지금까지 설명했던 코드들에서 foregroundStyle을 이용해서 해당 차트의 mark의 색상을 하나하나 지정할 수 있는 것은 이미 알 수 있었다. 그럼 이것 말고는 더 없을까? WWDC2022에서 참고한 내용으로는 .accessibilityLabel와 .accessibilityValue을 커스터 마이징 하여 VoiceOver에도 기여할 수 있게 된다. 차트는 말 그대로 시각적 효과이기 때문에 일반인의 경우 이해하기 쉽지만, 장애인 분들에게는 꼭 필요한 기능이므로 Char에서도 이 기능을 사용할 수 있는 것은 정말 좋은 것 같다.  

 

 

---

아직 차트를 계속 공부 중이므로 혹시나 추가되는 사항이 있거나 내가 빼먹은 부분이 있다면 차후에 수정하거나 2편으로 만나보면서 추가해도 좋을 것 같다. 오늘은 chart의 기본적인 사용법과 그에 대한 실습을 한번 진행해 보았다. 이후에 있을 실제 프로젝트에도 꼭 반영되도록  부족한 부분에 대해서 더 보완해 나가야겠다~🤩🤩

 

 

- 참고 링크 - 

https://developer.apple.com/documentation/charts/creating-a-chart-using-swift-charts

Creating a chart using Swift Charts | Apple Developer Documentation

https://developer.apple.com/wwdc22/10137

Swift Charts: Raise the bar - WWDC22 - Videos - Apple Developer