Swift Charts 是 Apple 在 iOS 16 上推出的一个图表绘制框架，它提供了一套直观且强大的 API，帮助开发者快速构建各种类型的图表。相比于第三方开源库（如 Charts 框架），Swift Charts 是系统原生的，拥有更高的性能优化，同时与 SwiftUI 紧密集成，使图表的添加更加方便和高效。

Swift Charts 提供了多种常见的图表类型，包括：

• 条形图（Bar Chart）
• 折线图（Line Chart）
• 饼图（Sector Chart）
• 散点图（Point Chart）
• 等等

要开始使用 Swift Charts，首先确保你的开发环境是 iOS 16 或更高版本，并且项目支持 SwiftUI。

无需额外添加依赖或第三方库，直接使用 Apple 提供的 API 即可。

为什么要使用图表

图表可以将复杂的数据转化为简单直观的可视化，帮助用户快速理解数据趋势。常见的使用场景包括，展示销售数据、用户增长，健身记录和记账记录，图表能提供清晰且美观的数据展示方式。

在 Apple 的健康和健身应用中，也大量的使用 Charts 进行数据展示：

图表设计规范

有关图表及其坐标轴的设计指南，可参考 Apple 《人机界面指南》中的图表部分：

Charts | Apple Developer Documentation

Organize data in a chart to communicate information with clarity and visual appeal.

Apple Developer Documentation

散点图（PointMark）

PointMark 是一种用于绘制点标记（Point Marks） 的图表元素，它在二维图表中表示数据点的位置。PointMark 可以帮助开发者在图表中展示散点数据或线图中的具体点，通常用于可视化具有 x 和 y 值的数值数据。

你可以使用 PointMark 轻松创建下面这种效果的图表：

你还可以使用 SF 符号自定义图标，实现下面这种效果：

基本用法

下面我们通过一个示例来展示如何使用 PointMark 创建简单的数据点图表：

import Charts
import SwiftUI

struct SalesData: Identifiable {
    let id = UUID()
    let month: String
    let sales: Int
}

struct PointMarkChartView: View {
    let salesData: [SalesData] = [
        SalesData(month: "Jan", sales: 200),
        SalesData(month: "Feb", sales: 220),
        SalesData(month: "Mar", sales: 190),
        SalesData(month: "Apr", sales: 260),
        SalesData(month: "May", sales: 280),
        SalesData(month: "Jun", sales: 300),
    ]

    var body: some View {
        Chart {
            ForEach(salesData) { data in
                PointMark(
                    x: .value("Month", data.month),
                    y: .value("Sales", data.sales)
                )
                .foregroundStyle(Color.blue)  // 设置点的颜色
            }
        }
        .frame(height: 300)
        .padding()
    }
}

struct PointMarkChartView_Previews: PreviewProvider {
    static var previews: some View {
        PointMarkChartView()
    }
}

上面这个代码创建了如图所示的散点图。我们首先使用Chart 组件展示数据点。通过 ForEach 循环，遍历数据集 salesData，并将每一个数据点用 PointMark 进行展示。

由于 LineMark（折线图）与 PointMark（散点图）使用方法上非常相似，所以你可以简单的将 PointMark 修改为 LineMark 即可得到一个折线图：

var body: some View {
    Chart {
        ForEach(salesData) { data in
            // 只需修改这里，其他代码保持不变
            LineMark( 
                x: .value("Month", data.month),
                y: .value("Sales", data.sales)
            )
            .foregroundStyle(Color.blue)  // 设置点的颜色
        }
    }
    .frame(height: 300)
    .padding()
}

自定义图表颜色（foregroundStyle）

Swift Charts 提供了丰富的自定义功能，允许调整图表的外观和交互效果，你可以通过设置颜色、形状、大小等。

类似于其他 SwiftUI 组件，你可以通过foregroundStyle() 修饰器来设置 Point 的颜色：

ForEach(salesData) { data in
    PointMark(
        x: .value("Month", data.month),
        y: .value("Sales", data.sales)
    )
    .foregroundStyle(Color.red)  // 设置点的颜色
}

Charts 还提供了foregroundStyle(by:) 修饰器，可以自动为不同的数据类别设置不同的颜色。例如，假设你希望按销售额的高低来区分不同的数据点：

ForEach(salesData) { data in
    PointMark(
        x: .value("Month", data.month),
        y: .value("Sales", data.sales)
    )
    .foregroundStyle(by: .value("Sales", data.sales))  // 按销售额进行着色
}

你无需手动设置具体的颜色，Swift Charts 会自动根据不同的值以及值的类型分配颜色。在上述代码中，由于 data.sales 是数字，因此 PointMark 自动选择使用渐变色来表示不同的值。

你也可以按照日期（月份）来区分不同的颜色：