Olaf⛄️ 2022-8-12終稿

前言

作為一個iOS開發者，我們在日常開發中，多多少少會遇到圖示展示類的需求，相信大家解決圖示需求時，都會直接使用或者參考github開源的圖表繪製框架：Charts，這個基於CoreGraphics繪製圖表的框架，支撐了相當一部分的圖表開發需求。

2022，Apple自己的圖表框架來了!

全新的 Swift Charts 框架在WWDC22中跟開發者見面了。這是一個強大而簡潔的SwiftUI框架，能將資料轉換為資訊豐富的可自定義視覺化圖表。下面是相關的4個Session：

強力建議觀看Session！！！

框架特性

上圖是Seesion中的效果呈現、展示了Swift Charts強大的繪製能力，從簡單的柱狀圖到複雜的向量圖，熱力圖，Swift Charts都可以用簡潔的程式碼實現。Swift Charts 支援 localization 本地化 和 accessibility 輔助功能。還可以使用圖表修飾符覆蓋預設行為以自定義圖表。 例如，可以通過向圖表新增動畫來建立動態體驗。

相容性

iOS 16+、iPadOS 16.0+、macOS 13.0+、watchOS 9.0+

Marks

• BarMark

可以使用BarMark建立不同型別的條形圖，如柱狀圖，進度條圖等。 * LineMark

可以通過繪製類別或日期屬性（通常使用 x 位置）和繪製數字類別（通常使用 y 位置）來建立折線圖。 * PointMark

可以使用 PointMark 圖表內容建立不同型別的點圖表。可以使用點標記構建的一個常見圖表是散點圖，它顯示兩個數值資料屬性之間的關係。 * AreaMark

可以使用 AreaMark 將資料視覺化為單個區域形狀。 可以使用 AreaMark 圖表內容建立不同型別的面積圖。 要建立簡單的區域標記圖表，我們通常會將日期或有序字串屬性繪製到 x 位置，將數字繪製到 y 位置。 * RuleMark

可以使用 RuleMark 在圖表中繪製水平或垂直規則，如平均線，閾值線等。 * RectangleMark

可以使用RectangleMark將資料欄位對映成矩形圖。 可以使用RectangleMark建立熱圖圖表或註釋圖表中的矩形區域。

以上就是Swift Charts所有的Mark，它們可以單獨使用，也可以組合使用，從而支撐開發者按需求開發出所需要的圖表。用Session中的圖來總結這些Mark吧

框架實踐

實現Swift Charts框架，首先需要對SwiftUI的語法有一定的瞭解，下面將挑選典型圖表進行coding實踐。

BarkMark

如果我們需要用一張圖表來直觀的呈現多個國家的某一項開支費用，那我們就可以直接用BarMark來構建一個簡單的柱狀圖來實現。

``` struct BarMarkData: Identifiable { let name: String let count: Double var id: String{name} }

let defData: [BarMarkData] = [     BarMarkData(name: "China", count: 15000),     BarMarkData(name: "US", count: 30000),     BarMarkData(name: "UK", count: 2000),     BarMarkData(name: "Japan", count: 800),     BarMarkData(name: "France", count: 3000) ]

struct BarMarkChartView: View { var body: some View { Chart(data) { BarMark( x: .value("name", $0.name), y: .value("count", $0.count) ) }.frame(width: 360, height: 300) } }

struct BarMarkChartView_Previews: PreviewProvider { static var previews: some View { AreaMarkChartView() } } ```

我們看呈現效果：

如果這項開支還需要跟另一項開支進行對比呈現，這該怎麼實現呢？我們只需要將上面的程式碼略微改動，即可實現，一下只貼上新增部分的程式碼：

```Swift let eduData: [BarMarkData] = [     BarMarkData(name: "China", count: 28000),     BarMarkData(name: "US", count: 35000),     BarMarkData(name: "UK", count: 6000),     BarMarkData(name: "Japan", count: 2000),     BarMarkData(name: "France", count: 5000) ]

let mergeData = [     (outlay: "def", data: defData),     (outlay: "edu", data: eduData) ]

struct AreaMarkChartView: View {     var body: some View {         Chart(mergeData, id: .outlay) { mergeData in             ForEach(defData) { datum in                 ForEach(mergeData.data, id: .id) { element in                     BarMark(                         x: .value("name", element.name),                         y: .value("count", element.count)                     ).position(by: .value("outlay", mergeData.outlay))                     .foregroundStyle(by: .value("outlay", mergeData.outlay))                 }             }         }.frame(width: 360, height: 300)     } } ```

我們再來看看呈現效果：

現在已經實現了幾個國家兩個費用支出的對比圖。對比上面，在程式碼上除了新增資料來源，在Charts實現環節，也新增了position和foregroundStyle兩個擴充套件方法

• .position

position可以建立分組，讓圖表沿水平軸按其“型別”標記具有相同“產品”的mark。 - .foregroundStyle

foregroundStyle按照傳參不同，可進行不同型別的展示設定，如下：

``` extension ChartContent {

/// Sets the foreground style for marks in this chart content.
///
/// - Parameter color: The color.
public func foregroundStyle<S>( _ style: S) -> some ChartContent where S : ShapeStyle


/// Encodes data as the foreground style for marks in this chart content.
///
/// - Parameter data: The data property or value.
public func foregroundStyle<D>(by value: PlottableValue<D>) -> some ChartContent where D : Plottable

} ```

LineMark

如果我們需要展示公司統計的一年內營收資料的變化，並且對比往年的資料，那此時我們可以用到的最簡單的圖就是線性圖了，當然我們也可以使用其他的型別的圖表來表示。下面我們先用LineMark來進行實踐

``` struct SalesSummary: Identifiable { let month: String let total: Int var id: String {month} }

let pastData: [SalesSummary] = [ .init(month: "Jan", total: 3388), .init(month: "Feb", total: 4420), .init(month: "Mar", total: 6120), ... .init(month: "Dec", total: 11076) ]

let lineData: [SalesSummary] = [ .init(month: "Jan", total: 5566), .init(month: "Feb", total: 4610), .init(month: "Mar", total: 5533), ... .init(month: "Dec", total: 12998) ]

let salesData = [ (quarter: "2022", data: currentData), (quarter: "2021", data: pastData) ]

struct LineMarkChartView: View { var body: some View { Chart{ ForEach(salesData, id: .years) { salesData in
ForEach(salesData.data, id: .id) { element in LineMark(x: .value("month", element.month), y: .value("total", element.total)) }.foregroundStyle(by: .value("sales", salesData.years)) } }.frame(width: 360, height: 300) } }

struct LineMarkChartView_Previews: PreviewProvider { static var previews: some View { LineMarkChartView() } } ```

我們來看效果：

如果想給折線圖增加一個數據點的標記符號，同時讓折線變的圓潤，那我們就需要實現以下兩個屬性

struct LineMarkChartView: View { var body: some View { Chart{ ForEach(salesData, id: .years) { salesData in ForEach(salesData.data, id: .id) { element in LineMark(x: .value("month", element.month), y: .value("total", element.total)) .interpolationMethod(.catmullRom) .symbol(by: .value("sales", salesData.years)) }.foregroundStyle(by: .value("sales", salesData.years)) } }.frame(width: 360, height: 300) } }

再看下效果：

此時我們可以看到資料節點都用原點標記出來，並且折線也變成了更加柔和的曲線，這就是 interpolationMethod 和 symbol 這兩個屬性發揮的作用。

• interpolationMethod

返回使用給定插值繪製資料的圖表內容，包含多個，這裡不一一列舉了，可以檢視api，這個方法僅提供給Line 和 Area 兩種Mark - symbol

symbol根據傳參不同有三個不同的方法實現，來支援不同的特性功能

```Swift extension ChartContent { /// 設定此圖表內容中標記的繪圖符號型別 /// - Parameter symbol: The symbol. public func symbol( _ symbol: S) -> some ChartContent where S : ChartSymbolShape

/// 將資料編碼為此圖表內容中標記的符號。如上面的例子
/// - Parameter data: The data property or value.
public func symbol<D>(by value: PlottableValue<D>) -> some ChartContent where D : Plottable

/// 返回以給定檢視作為繪圖符號的圖表內容。
/// - Parameter symbol: The view to use as the plotting symbol.
public func symbol<V>(@ViewBuilder symbol: () -> V) -> some ChartContent where V : View