[SwiftUI] Charts 이론편 (feat. iOS16+ apple framework)

슬슬 미니멈버전이 16이 되는 시대가 다가오고 있는 만큼

iOS16 부터 사용할 수 있는 내장 프레임워크인

Charts 를 알아보려고 합니다!

간단하게 이론적인 부분위주로 어떻게 쓰이고 사용할 수 있는지 쓰윽 볼까요?

 

웅장합니다

이런 모든 차트를 구현할 수 있다고 하네요

 

차트프레임워크는

SwiftUI와 동일한 선언적 구문을 사용하여 차트를 시각화합니다

Mark와 Property의 조합으로 다양한 차트를 구현할 수 있다고 하네요

 

이처럼 어떤 Mark를 고르는지, 어떤 프로퍼티를 고르는지에 따라 정말 많은 차트가 생길 것 같네요

 

 

Marks and composition

차트에서 여섯개의 파란색 직사각형을 Mark라고합니다

Mark는 데이터를 나타내는 그래픽요소이고

각각 하나의 막대는 Bar Mark입니다.

이 차트에는 6개의 Bar Mark가 있습니다.

 

.foregroundStyle()를 사용해서 원하는 색상으로 변경도 가능하고

value값을 기준으로 자동으로 색을 구분하도록 지정도 가능합니다.

 

차트는 시각적인 요소가 중요하다보니

컬러를 지정할때 색맹을 고려해서 지정하는것을 권장하며

.symbol()을 추가해서 기호를 통해  더 명확한 차이점을 추가할 수 있습니다

 

겹치는 값이 있는경우 막대는 자동으로 적층되는 형태를 띕니다

이런 형태가 좋을때도 있지만 적절하지 않을 때는 position(by: )를 사용하여 그룹형으로 변경할 수 있습니다.

 

 

꺾은선 그래프에서 현재값과 그날의 최댓값, 최솟값도 비교하고싶다면 AreaMark를 추가해서 시각적 효과를 추가할 수 있습니다.

 

막대그래프로도 가능합니다

막대그래프인 경우 이런 평균을 나타내는 AreaMark보다 RuleMark를 이용해서 평균치를 비교하면 보기좋은 차트가됩니다.

.annotation() 을 사용하여 그래프에 주석을 추가할 수 있습니다.

 

 

Plotting data with mark properties

Swift Charts는 3가지 주요데이터를 지원합니다

 

Quantitative(양적) - 수치, 보통 Int, float, double등 양적 데이터(sales, temperature, stockPrice)

Nominal(명목적) - 범주형 데이터 또는 개별적 범주 혹은 그룹을 난타냄(name, continent, type)

Temporal(시간적) - 특정시각이나 시간간격 나타냄(day, transactionTime)

 

이를 이용해서 데이터를 구분합니다

예를들어

Bar Mark를 사용할 때

양적 속성의 위치에 따라서 막대의 방향이 달라집니다

 

Swift Charts는 맵핑을 생성해서 추상적 데이터를 적절한 속성값으로 변환합니다

이경우에는 Sales값을 화면공간의 Y좌표로 변환합니다

 

여기서 Scale이란 판매량과같은 추상데이터에서

Y위치 같은 property를 표시하는 맵핑을 가르킵니다. (여기서 property는 위에서본 조합가능한 프로퍼티들중 하나)

즉, 데이터값을 가져와서 property값으로 반환하는 함수입니다.

위치속성에서 입력값을 적절한 화면좌표로 변환할때 몇가지 비율을 이용해서 크기를 조정하기 때문입니다.

데이터를 그릴때 Scale이 생성되며 데이터를 Mark property로 변환합니다

 

.chartYScale()로 y스케일 영역을 설정가능

.chartForegroundStyleScale()로 차트에 색입히기 가능

 

 

Customizations

차트는  Axes(축), Legend(범례), Plot Area(플롯 영역)로 구성됩니다.

축과 범례로 차트를 해석할 수 있고

플롯영역은 두축사이의 공간으로 Mark로 데이터를 그리는 공간입니다.

 

개발자가 지정하지않으면 반올림된 값으로 기본축을 생성합니다

.chartXAxis()를 사용하여 AxisMarks로 컨텐츠를 바꿀수있습니다.

예시 사진에서 분기간격에서 한달간겨으로 변경된 것을 볼 수 있습니다.

한달간격이라 글자도 잘리고 너무 난잡해보이기때문에 수정이 필요합니다. 이때 커스텀이 가능합니다.

AxisGridLine, AxisTick, AxisValueLabel, 등을 이용하여

축의 내용을 커스텀 할 수 있습니다.

또한 AxisMarks를 이용하여 조건에 따라 AxisMarks의 존재와 스타일을 결정 할 수 있습니다.

AxisMarks빌더로 현재의 축값정보를 제공합니다

AxisMarks( values: .stride(by: .month) ) { value in ... }

.chartYAxis()를 사용한다면 y축에대한 옵션을 변경할 수 있습니다.

 

.extended() 를 사용하면 자연스러운 UI설정이가능합니다.

오른쪽 extended사용

 

.chartPlotStyle() 를 사용하여 차트의 플롯영역을 구성할 수 있습니다.

범주 수에따라 플롯영역높이가 동적으로 설정되도록할때 유용합니다.

백그라운드도 추가한다면 특별한 시각효과도 줄 수 있습니다.

 

 

ChartProxy

차트의 X와 Y Scale에 접근할 수 있습니다.

position(forX: )로 주어진 데이터값의 위치를 얻을 수 있습니다.

value(atX: )로 주어진 위치의 데이터값을 구할 수 있습니다.

이를 이용해서 차트와 다른뷰를 조정할 수 있습니다.

예로들어 아래그림처럼 차트에서 드래그 제스처로 간격을 선택할 수 있고 그 간격은 세부정보 뷰에서 행을 필터링하는데 사용할 수 있습니다.

.chartOverlay(), .chartBackground() 사용시 chart proxy가 클로저로 넘어와서 차트위나 아래에 뷰를 그리는 등, 원하는 작업을 할 수 있습니다.

 

 

여기까지가 iOS16 입니다

하지만 여기서

문득드는생각으로

주로 차트를 쓸때 막대, 꺾은선 그리고 파이차트 를 많이 사용하죠!

파이차트에 대한 언급이없어서 아쉬웠는데

iOS17에 추가가 되었다고하네요!

 

 

지금부터 아래 글은 iOS17+ 에 해당하는 내용입니다. 

 

Pie Charts

네 파이차트는 iOS17+ 입니다

파이차트는 축이없어서 정밀도가 중요하지않은 환경에 적합하고

부분과 전체의 관계를 시각화하는데 직관적입니다.

이미 익숙한 Mark기반구성을 사용하여 파이차트를 만들 수 있습니다.

 

iOS17에 추가된 Sector Mark를 사용해요

섹터는 파이의 한조각을 나타냅니다.

 

파이차트는 극좌표계에 위치합니다.

(북극남극할때 그 극과는 다른 극이라고 부연설명도 하네요)

원에 희미하게보이는.. 점선으로 동심원이 그려진.. 세로가로선도 있고... 그런 좌표계입니다.

섹터크기는 섹터가 나타내는 값에 비례합니다.

반경(radius)에 따라서 섹터모양을 지정할 수 있습니다.

예를들어 원형차트에서 내부반경을 늘리면 도넛차트를 구현 할 수 있습니다.

 

 

위와같이 이런 누적통계를 기존의 막대차트에서 원형차트로으로 바꾸려고한다면

 

BarMark와 x축을 지우고 SectorMark와 angle로 변경하면 됩니다.

또한

angularInset속성으로 파이차트 사이의 공백을 추가할 수 있고

innerRadius속성으로 도넛차트로 구현할 수 있습니다.

 

도넛차트인경우 가운데에 공백이있고 이를 활용하면 효과적이기때문에

중앙을 이용하기위해

chartBackground()를 이용해서 제일 높은값이 나타날 수 있도록 설정할 수 있습니다.

 

 

iOS17에 추가된 차트관련 내용들로

차트와의 상호작용부분인 Selection(선택기능), Scrolling (스크롤기능)이 언급됬습니다.

 

Selection

선택기능 부터보면

보통 차트의 값을 선택해서 날짜에 대응되는 팝업을 구현할때

위에서 익숙하게 본 chartOverlay를 이용해서 할 수 있지만!

iOS17에서는 chartXSelection(value: ) 를 지원해줌으로써 제스처를 캡쳐할 수 있습니다.

모든 제스처인식을 처리하고 선택한 값을 바인딩에 저장합니다

 

팝업을 구현하는 과정은 아래와 같습니다.

바인딩된 값을 이용해서 값이있다면

RuleMark를 이용해서 세로선을 긋고

zIndex를 이용하여 0보다 작은수를 입력해서 차트의 뒤로가도록 합니다

 

그뒤에 

.annotation() 을 이용해서 popover될 뷰를 그립니다

 

그뒤에 

overflowResolution속성을 이용하여 차트범위를 넘지않도록 설정합니다

overflowResolution는 iOS17에서 추가된 속성으로 차트범위를 넘어서 확장되는 것을 방지해줍니다.

조금 길이가있는 팝업 같은경우 차트의 끝값을 누르면 보통 넘어가지만 이 속성을 이용하면 넘어가지않도록 자동으로 막아줍니다!

아주좋은 기능같네요

예제에서는 x축은 가로 경계를 넘지않도록조정하고 y축은 비활성화하여 주석이 차트 바로위에 뜨도록 설정했습니다.

 

chartXSelection에서 value(값) 이외에도 range(범위)를 설정할 수도있습니다.

 

 

iOS에서는 기본이 두손가락 탭 제스처이고 macOS에서는 드래그 제스처입니다.

.chartGesture() 를 사용하여

지정제스처를 제공하여 선택범위를 지정할 수 있고 제스처위치에 따라 값을 선택할 수 있습니다.

이전에는 gesture와 chartOverlay를 이용하여 구현해줘야했던부분을 간편하게 할 수 있게됬습니다.

 

.chartAngleSelection()을 이용하여 x,y좌표 차트외에도 파이차트와 도넛차트에서 원활하게 작동합니다

파이차트를 강조하는 효과에 좋네요

 

selection은 차트에서 추가정보를 표시하는 것이 전부입니다.

상호작용의 다른 중요한 부분은 데이터를 탐색하는 것입니다.

 

Scrolling

이제부터 탐색에 중요한 스크롤에 대한 추가기능을 알아보겠습니다.

 

1년동안의 데이터를 차트로 모두보여주기엔 비현실적이므로 스크롤이 가능해야 하는경우를 예시로 들고있습니다.

chartScrollableAxes() 를 이용하여 스크롤을 활성화할 수 있습니다.

.chartXVisibleDomain() 를 이용하여 보이는 간격을 설정할 수 있습니다.(위의 예제에서는 30일간격으로 보임)

.chartScrollPosition(x: )를 이용하여 스크롤위치가 바인딩에 저장됩니다.(예제에서는 날짜가 저장됨)

.chartScrollTargetBehavior() 를 이용하여 스크롤을 정렬할 수 있습니다.(예제에서는 날짜단위로 정렬됨)

속성값중

matching은 snap동작인 경우로, 하루중 첫번째 시간에맞춰서 정렬했고

(차트 스크롤중 차트 인식단위)

majorAlignment는 swiping동작을 정의하여 여기서는 한달의 첫달로 설정하여 차트를 넘길때 항상 매월 1일에 도착하도록 했습니다.

(스와이프시 맞춰지는 정렬)

 

 

 

간단하게 차트에 대해 이론적인 부분을 정리해봤습니다!

차트같은경우 외부라이브러리에 의존되는 경우도많고, 라이브러리에서 지원안해주면 하나하나 구현하는게 어려웠던일이였는데

이제 퍼스트파티에서 지원해주니까 기대가되네요!

다음엔 직접 여러차트를 구현해보는 글로 찾아오겠습니다! 

 

 

 

참고

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

Hello Swift Charts - WWDC22 - Videos - Apple Developer

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

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

https://developer.apple.com/wwdc23/10037

Explore pie charts and interactivity in Swift Charts - WWDC23 - Videos - Apple Developer