데이터 시각화를 위한 애플의 방법

• SwiftUI와 동일한 문법

bar chart 예시

import Charts
import SwiftUI

struct StylesDetailsChart: View {
	var body: some View {
		Chart {
			BarMark(
				x: .value("Name", "Cachapa"),
				y: .value("Sales", 916)
			)

			BarMark(
				x: .value("Name", "Injera"),
				y: .value("Sales", 850)
			)
		}
	}
}

Array 기반으로 그리기 - Chart 생성자는 ForEach 처럼 동작한다.

import Charts
import SwiftUI

struct Pancakes: Identifiable {
	let name: String
	let sales: Int

	var id: String { name }
}

let sales: [Pancakes] = [
	.init(name: "Cachapa", sales: 916),
	.init(name: "Injera", sales: 850),
	.init(name: "crêpe", sales: 802),
	.init(name: "Jian Bing", sales: 753),
	.init(name: "Dosa", sales: 654),
	.init(name: "American", sales: 618),
]

struct StylesDetailsChart: View {
	var body: some View {
		Chart(sales) { element in
				BarMark(
					x: .value("Name", element.name),
					y: .value("Sales", element.sales)
				)
			}
	}
}

x-y를 바꾸면 반대로 그려진다.

• 주어진 값이 수치인지, 라벨인지 판단해서 알아서 그리는 듯

  

보이스 오버 및 오디오 그래프도 지원

동일한 스타일의 차트 간에는 애니매이션도 지원

struct LocationsToggleChart: View {
	@State var city: City = .cupertino

	var data: [SalesSummary] {
		switch city {
			case .cupertino:
				return cupertinoData
			case .sanFrancisco:
				return sfData
		}
	}

	var body: some View {
		VStack {
			Picker("City", selection: $city.animation(.easeInOut)) {
				Text("Cupertino").tag(City.Cupertino)
				Text("San Francisco").tag(City.sanFrancisco)
			}
			.pickerStyle(.segmented)

			Chart(data) { element in
				BarMark(
					x: .value("Day", element.weekday, unit: .day),
					y: .value("Sales", element.sales)
				)
			}
		}
	}
}

여러개의 데이터를 묶어서 보여주기

• 범례도 자동으로 만들어준다.

struct Series: Identifiable {
	let city: String
	let sales: [SalesSummary]

	var id: String { city }
}

let seriesData: [Series] = [
	.init(city: "Cupertino", sales: cupertinoData),
	.init(city: "San Francisco", sales: sfData),
]

struct LocationDetailChart: View {
	var body: some View {
		Chart(seriesData) { series in
			ForEach(series.sales) { element in
				BarMark(
					x: .value("Day", element.weekday, unit: .day),
					y: .value("Sales", element.sales)
				)
				.foregroundStyle(by: .value("City", series.city) 
			}
		}
	}
}

다양한 마크 지원

• PointMark

  PointMark(
  	x: .value("Day", element.weekday, unit: .day),
  	y: .value("Sales", element.sales)
  )
  

  

• LineMark

  LineMark(
  	x: .value("Day", element.weekday, unit: .day),
  	y: .value("Sales", element.sales)
  )
  

  

두 개 이상의 Mark를 동시에 쓰는 것도 가능

심볼도 컬러처럼 지정 가능

.symbol(by: .value("City", series.city))

Overview

• 다양한 스타일을 가지고 있고, 커스텀도 가능하다.

• 이 모든 것이 접근성, 다국어, 멀티 플랫폼을 지원한다.

  

  

후속 세션: Swift Charts: Raise the bar