데이터 시각화를 위한 애플의 방법
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