前言
蘋果在 WWWDC 2022 上推出了 SwiftUI 圖表，這使得在 SwiftUI 視圖中創(chuàng)建圖表變得異常簡單。圖表是以豐富的格式呈現(xiàn)可視化數(shù)據(jù)的一種很好的方式，而且易于理解。本文展示了如何用比以前從頭開始創(chuàng)建同樣的折線圖少得多的代碼輕松創(chuàng)建折線圖。此外，自定義圖表的外觀和感覺以及使圖表中的信息易于訪問也是非常容易的。
如以前的文章所示，不使用 SwiftUI Charts 也可以創(chuàng)建一個折線圖。然而，使用 Charts[1] 框架可以提供大量的圖表來探索對應(yīng)用程序中的數(shù)據(jù)最有效的方法，從而使它變得更加容易。
系列文章
- 如何在 SwiftUI 中創(chuàng)建條形圖
- SwiftUI 中的水平條形圖
- 在 iOS16 中用 SwiftUI 圖表定制一個線圖
- 在 Swift 圖表中使用 Foudation 庫中的測量類型
簡單折線圖
從包含一周的步數(shù)的數(shù)據(jù)開始，類似于 在SwiftUI中創(chuàng)建折線圖 中使用的數(shù)據(jù)。定義一個結(jié)構(gòu)來保存日期和該日的步數(shù)，并為當前周創(chuàng)建一個數(shù)組。
struct StepCount: Identifiable {
let id = UUID()
let weekday: Date
let steps: Int
init(day: String, steps: Int) {
let formatter = DateFormatter()
formatter.dateFormat = "yyyyMMdd"
self.weekday = formatter.date(from: day) ?? Date.distantPast
self.steps = steps
}
}
let currentWeek: [StepCount] = [
StepCount(day: "20220717", steps: 4200),
StepCount(day: "20220718", steps: 15000),
StepCount(day: "20220719", steps: 2800),
StepCount(day: "20220720", steps: 10800),
StepCount(day: "20220721", steps: 5300),
StepCount(day: "20220722", steps: 10400),
StepCount(day: "20220723", steps: 4000)
]要創(chuàng)建一個折線圖，為步數(shù)數(shù)據(jù)中的每個元素創(chuàng)建一個帶有LineMark的圖表。在LineMark的 X 值中指定工作日，在 Y 值中指定步數(shù)。注意，還需要導入Charts框架。
這就為步數(shù)數(shù)據(jù)創(chuàng)建了一個線形圖。由于只有一個系列的數(shù)據(jù)，F(xiàn)orEach 可以省略，數(shù)據(jù)可以直接傳遞給 Chart 初始化器。兩個部分都產(chǎn)生相同的折線圖。
import SwiftUI
import Charts
struct LineChart1: View {
var body: some View {
VStack {
GroupBox ( "Line Chart - Step Count") {
Chart {
ForEach(currentWeek) {
LineMark(
x: .value("Week Day", $0.weekday, unit: .day),
y: .value("Step Count", $0.steps)
)
}
}
}
GroupBox ( "Line Chart - Step Count") {
Chart(currentWeek) {
LineMark(
x: .value("Week Day", $0.weekday, unit: .day),
y: .value("Step Count", $0.steps)
)
}
}
}
}
}
使用 SwiftUI Charts 創(chuàng)建的折線圖顯示每日步數(shù)
其他圖表
SwiftUI Charts 有許多可用的圖表選項。這些可以通過將圖表標記從LineMark改為其他類型的標記（如BarMark）來生成條形圖。
struct OtherCharts: View {
var body: some View {
VStack {
GroupBox ( "Line Chart - Step count") {
Chart(currentWeek) {
LineMark(
x: .value("Week Day", $0.weekday, unit: .day),
y: .value("Step Count", $0.steps)
)
}
}
GroupBox ( "Bar Chart - Step count") {
Chart(currentWeek) {
BarMark(
x: .value("Week Day", $0.weekday, unit: .day),
y: .value("Step Count", $0.steps)
)
}
}
GroupBox ( "Point Chart - Step count") {
Chart(currentWeek) {
PointMark(
x: .value("Week Day", $0.weekday, unit: .day),
y: .value("Step Count", $0.steps)
)
}
}
GroupBox ( "Rectangle Chart - Step count") {
Chart(currentWeek) {
RectangleMark(
x: .value("Week Day", $0.weekday, unit: .day),
y: .value("Step Count", $0.steps)
)
}
}
GroupBox ( "Area Chart - Step count") {
Chart(currentWeek) {
AreaMark(
x: .value("Week Day", $0.weekday, unit: .day),
y: .value("Step Count", $0.steps)
)
}
}
}
}
}
使用 SwiftUI 圖表創(chuàng)建的其他圖表類型，顯示每日步數(shù)
讓折線圖增加可訪問性
將圖表植入 SwiftUI 的一個好處是，可以很容易地使用可訪問性修飾符[2]使圖表變得可訪問。為 StepCount 添加一個計算屬性，將數(shù)據(jù)返回為一個字符串，可由 accessibilityLabel 使用。然后為圖表中的每個標記添加可訪問性標簽和值。
struct StepCount: Identifiable {
let id = UUID()
let weekday: Date
let steps: Int
init(day: String, steps: Int) {
let formatter = DateFormatter()
formatter.dateFormat = "yyyyMMdd"
self.weekday = formatter.date(from: day) ?? Date.distantPast
self.steps = steps
}
var weekdayString: String {
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "yyyyMMdd"
dateFormatter.dateStyle = .long
dateFormatter.timeStyle = .none
dateFormatter.locale = Locale(identifier: "en_US")
return dateFormatter.string(from: weekday)
}
}GroupBox ( "Line Chart - Daily Step Count") {
Chart(currentWeek) {
LineMark(
x: .value("Week Day", $0.weekday, unit: .day),
y: .value("Step Count", $0.steps)
)
.accessibilityLabel($0.weekdayString)
.accessibilityValue("\($0.steps) Steps")
}
}
在 SwiftUI 圖表中使折線圖可訪問性
為折線圖添加多個數(shù)據(jù)序列
折線圖是比較兩個不同系列數(shù)據(jù)的好方法。創(chuàng)建第二個系列，即前一周的步數(shù)，并將這兩個系列添加到折線圖中。
let previousWeek: [StepCount] = [
StepCount(day: "20220710", steps: 15800),
StepCount(day: "20220711", steps: 7300),
StepCount(day: "20220712", steps: 8200),
StepCount(day: "20220713", steps: 25600),
StepCount(day: "20220714", steps: 16100),
StepCount(day: "20220715", steps: 16500),
StepCount(day: "20220716", steps: 3200)
]
let currentWeek: [StepCount] = [
StepCount(day: "20220717", steps: 4200),
StepCount(day: "20220718", steps: 15000),
StepCount(day: "20220719", steps: 2800),
StepCount(day: "20220720", steps: 10800),
StepCount(day: "20220721", steps: 5300),
StepCount(day: "20220722", steps: 10400),
StepCount(day: "20220723", steps: 4000)
]
let stepData = [
(period: "Current Week", data: currentWeek),
(period: "Previous Week", data: previousWeek)
]
第一次嘗試添加這兩個系列的數(shù)據(jù)沒有按預(yù)期顯示。
struct LineChart2: View {
var body: some View {
GroupBox ( "Line Chart - Daily Step Count") {
Chart {
ForEach(stepData, id: \.period) {
ForEach($0.data) {
LineMark(
x: .value("Week Day", $0.weekday, unit: .day),
y: .value("Step Count", $0.steps)
)
.accessibilityLabel($0.weekdayString)
.accessibilityValue("\($0.steps) Steps")
}
}
}
}
}
}
第一次嘗試在 SwiftUI Charts 中創(chuàng)建一個包含兩個系列步數(shù)數(shù)據(jù)的折線圖
顯示步數(shù)系列
在折線圖中顯示多個基于工作日的步數(shù)系列
最初嘗試在折線圖中顯示多組數(shù)據(jù)的問題是X軸使用了日期。當前的周數(shù)緊接著上一周，所以每一個點都是沿著X軸線性遞增繪制的。
有必要只用工作日作為X軸的數(shù)值，這樣所有的周日都在同一個X坐標上繪制。
在StepCount中添加另一個計算屬性，以便以字符串格式返回工作日的短日。
struct StepCount: Identifiable {
. . .
var shortDay: String {
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "EEE"
return dateFormatter.string(from: weekday)
}
}此 shortDay 用于圖表中 LineMarks 的 x 值。另外，前景的樣式設(shè)置為基于stepCount數(shù)組的周期。折線圖使用 x 軸的工作日來顯示兩周的步數(shù)，以便在周之間進行比較。
struct LineChart3: View {
var body: some View {
VStack {
GroupBox ( "Line Chart - Daily Step Count") {
Chart {
ForEach(stepData, id: \.period) { steps in
ForEach(steps.data) {
LineMark(
x: .value("Week Day", $0.shortDay),
y: .value("Step Count", $0.steps)
)
.foregroundStyle(by: .value("Week", steps.period))
.accessibilityLabel($0.weekdayString)
.accessibilityValue("\($0.steps) Steps")
}
}
}
.frame(height:400)
}
.padding()
Spacer()
}
}
}
SwiftUI圖表中帶有兩個系列的步數(shù)數(shù)據(jù)的折線圖
結(jié)論
在 SwiftUI Charts 中還有很多東西可以探索。使用這個框架顯然比從頭開始建立你自己的圖表要好。
參考資料
[1]Charts: ??https://developer.apple.com/documentation/charts。??
[2]可訪問性修飾符: ??https://developer.apple.com/documentation/swiftui/view-accessibility。??
