Hello Swift Charts

Apple 終於在 Xcode 14 開發工具中提供了圖表框架,框架名稱為 Charts,現在不需要透過第三方函數庫或是自己算座標就可以畫出漂亮的圖表,趁著新鮮熱辣,趕緊來看個小範例嚐鮮一下。

1. 建立 SwiftUI 專案。

2. 在專案中新增一個 BarChart.swift 的 SwiftUI View 檔案,用來產生長條圖,而長條圖要用來顯示每項產品的銷售數量。

3. 在 BarChart.swift 中匯入 Charts 框架,並且定義一個長條圖所需要的結構,用來儲存產品名稱、銷售數量以及長條圖的顏色。

import Charts

struct Product: Identifiable {
    var id = UUID()
    var name: String
    var count: Int
    var color: Color
}

4. 在 BarChart 中宣告一個陣列,存放三個商品資訊。

struct BarChart: View {
    var products: [Product] = [
        .init(name: "鉛筆", count: 10, color: .brown),
        .init(name: "橡皮擦", count: 5, color: .indigo),
        .init(name: "膠帶", count: 13, color: .mint)
    ]

5. 在 body 中使用 Chart {} 與 BarMark() 就可以輕鬆畫出長條圖了。

var body: some View {
    Chart(products) { item in
        BarMark(
            x: .value("2022", item.name),
            y: .value("銷售量", item.count)
        )
        .foregroundStyle(item.color)
    }
}

簡單到極致,其他功能持續研究中。官方說明文件,請參考  https://developer.apple.com/documentation/charts/creating-a-chart-using-swift-charts

【延伸閱讀】

Hello Swift Charts – Part 2

Hello Swift Charts – Part 3

4 thoughts on “Hello Swift Charts

  1. 老師的學生
    老師的學生 says:

    請問 UIKit 有支援嗎?如果沒有是不是代表有一天 UIKit 很有可能會被完全放棄?老師的想法呢?

    想請問如果 Mac 不支援 Ventura 的話,有什麼方法能裝 Xcode 14?

    萬分感謝!

  2. 朱克剛
    朱克剛 says:

    嗨我的學生

    這個問題不錯。首先,Charts 框架目前怎麼看都是給 SwiftUI 用的,我不知道他能不能顯示在 UIKit 的 UIViewController 上。但這個問題不大,因為 Apple 已經提供了在 UIViewController 中內嵌一個 SwiftUI 介面的方式,我晚點發佈一篇文章讓大家認識一下作法。

    至於 UIKit 會不會被完全放棄,這問題其實很難說,如果要放棄 UIKit,代表 Objective-C 也必須被消滅掉,但現在業界有一堆專案還是用 Objective-C 寫的,所以短時間內 UIKit 必須存在。而且有些 UIKit 很容易做到的東西在 SwiftUI 非常難搞,當然未來會變的簡單,但至少現在不是。而且我覺得,對初學者而言,Storyboard 比用程式碼刻介面直覺多了,也許因為我是從 Visual Basic 開始認識視窗程式,所以我對這種拉介面寫程式的方式有偏好。回歸正題,SwiftUI 必須要會,但現在開新專案是不是非要用 SwiftUI 則見仁見智,使用者才不會管這個 App 是怎麼生出來的。SwiftUI 與 UIKit 我認為也不是非 A 即 B,互相搭配著使用各取其優點沒有什麼不好,意思就是兩個都要會。

    Xcode 14 至少要在 macOS 12.4 以上才能安裝,所以就是逼著買新電腦的意思。不過網路上可以查到硬升級的作法,原理跟使用黑蘋果差不多,有興趣可以試試,我是沒勇氣嘗試啦,吃飯的工具還是乖乖買新的。

    • 老師的學生
      老師的學生 says:

      謝謝老師回覆!

      感覺等 SwiftUI 的 Storyboard 出來,UIKit 應該就差不多了…

      內嵌的話,舉例:如果想在介面同時出現「AB」,是可以允許第一層用 UIKit 顯示 A,再疊一層用 SwiftUI 顯示 B,來共同顯示「AB」這樣嗎?還是只能選擇其中一種來顯示「AB」?

      感謝~!

發表迴響