iOS16使用SwiftUI Charts創(chuàng)建折線圖實(shí)現(xiàn)實(shí)例

更新時(shí)間：2022年11月08日 16:16:09 作者：Swift社區(qū)

這篇文章主要為大家介紹了iOS16使用SwiftUI Charts創(chuàng)建折線圖實(shí)現(xiàn)實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

蘋果在 WWDC 2022 上推出了 SwiftUI 圖表，這使得在 SwiftUI 視圖中創(chuàng)建圖表變得異常簡(jiǎn)單。圖表是以豐富的格式呈現(xiàn)可視化數(shù)據(jù)的一種很好的方式，而且易于理解。本文展示了如何用比以前從頭開(kāi)始創(chuàng)建同樣的折線圖少得多的代碼輕松創(chuàng)建折線圖。此外，自定義圖表的外觀和感覺(jué)以及使圖表中的信息易于訪問(wèn)也是非常容易的。

如以前的文章所示，不使用 SwiftUI Charts 也可以創(chuàng)建一個(gè)折線圖。然而，使用 Charts 框架可以提供大量的圖表來(lái)探索對(duì)應(yīng)用程序中的數(shù)據(jù)最有效的方法，從而使它變得更加容易。

簡(jiǎn)單折線圖

從包含一周的步數(shù)的數(shù)據(jù)開(kāi)始，類似于 在SwiftUI中創(chuàng)建折線圖 中使用的數(shù)據(jù)。定義一個(gè)結(jié)構(gòu)來(lái)保存日期和該日的步數(shù)，并為當(dāng)前周創(chuàng)建一個(gè)數(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)
]

要?jiǎng)?chuàng)建一個(gè)折線圖，為步數(shù)數(shù)據(jù)中的每個(gè)元素創(chuàng)建一個(gè)帶有LineMark的圖表。在LineMark的 X 值中指定工作日，在 Y 值中指定步數(shù)。注意，還需要導(dǎo)入Charts框架。

這就為步數(shù)數(shù)據(jù)創(chuàng)建了一個(gè)線形圖。由于只有一個(gè)系列的數(shù)據(jù)，ForEach 可以省略，數(shù)據(jù)可以直接傳遞給 Chart 初始化器。兩個(gè)部分都產(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 有許多可用的圖表選項(xiàng)。這些可以通過(guò)將圖表標(biāo)記從LineMark改為其他類型的標(biāo)記（如BarMark）來(lái)生成條形圖。

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ù)

讓折線圖增加可訪問(wèn)性

將圖表植入 SwiftUI 的一個(gè)好處是，可以很容易地使用 可訪問(wèn)性修飾符 使圖表變得可訪問(wèn)。為 StepCount 添加一個(gè)計(jì)算屬性，將數(shù)據(jù)返回為一個(gè)字符串，可由 accessibilityLabel 使用。然后為圖表中的每個(gè)標(biāo)記添加可訪問(wèn)性標(biāo)簽和值。

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 圖表中使折線圖可訪問(wèn)性

為折線圖添加多個(gè)數(shù)據(jù)序列

折線圖是比較兩個(gè)不同系列數(shù)據(jù)的好方法。創(chuàng)建第二個(gè)系列，即前一周的步數(shù)，并將這兩個(gè)系列添加到折線圖中。

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)
]

第一次嘗試添加這兩個(gè)系列的數(shù)據(jù)沒(méi)有按預(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)建一個(gè)包含兩個(gè)系列步數(shù)數(shù)據(jù)的折線圖

顯示步數(shù)系列

在折線圖中顯示多個(gè)基于工作日的步數(shù)系列

最初嘗試在折線圖中顯示多組數(shù)據(jù)的問(wèn)題是X軸使用了日期。當(dāng)前的周數(shù)緊接著上一周，所以每一個(gè)點(diǎn)都是沿著X軸線性遞增繪制的。

有必要只用工作日作為X軸的數(shù)值，這樣所有的周日都在同一個(gè)X坐標(biāo)上繪制。

在StepCount中添加另一個(gè)計(jì)算屬性，以便以字符串格式返回工作日的短日。

struct StepCount: Identifiable {
    . . .
    var shortDay: String {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "EEE"
        return  dateFormatter.string(from: weekday)
    }
}

此 shortDay 用于圖表中 LineMarks 的 x 值。另外，前景的樣式設(shè)置為基于stepCount數(shù)組的周期。折線圖使用 x 軸的工作日來(lái)顯示兩周的步數(shù)，以便在周之間進(jìn)行比較。

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()
        }
    }
}