# 细品Swift - 一目了然的图表Swift Charts（1）

Apple在2022年的WWDC介绍了新的SwiftUI framework - Swift Charts. 此框架提供了SwiftUI图表绘制和显示功能，极大的方便了数据的显示。

Overview

Swift Charts框架提供标记、比例尺、轴和图例作为构建块，您可以将它们组合起来以开发各种数据驱动的图表，包括折线图、条状图和散点图等。

Topics

最简单的Chart图表

图表是围绕着一系列的Mark（标记，记号）构建的。每个mark对应一个数据点，mark在一个二位坐标系必须有x和y坐标才能定位，从而被画在图表中。
坐标的值可以是三种类型之一：

双精度浮点数: Double
日期: Date
字符串: String

这些数值必须以键值对参数的形式提供给PlottableValue类型，来创建mark标记实例。创建一个数据标记的具体方式如下。

PointMark(x: Plottable.value("xKey", "xValueInString"),
        y: Plottable.value("yKey", yValueInDouble))

在上述PointMark点标记创建过程中，x坐标提供了String类型的数据，而y坐标提供了Double类型的数据。

在下面完整图表案例中，我们以散点图的方式直接显示了三个数据点。可以看到，对每个数据点需要提供两个值，x轴坐标x，和y轴左边y。
完整的范例如下：

            // Chart图表中，通过标识的是各种标记（Mark）来把数据图形化。
            // 数据的x轴坐标，一般代表数据分类，标识在数据底部；
            // 数据的y轴坐标，一般代表数据的值，通过y轴标识大小；
            // x和y轴坐标参数值都是PlottableValue，键值对的方式。
            // 可以选取的值类型有Double， String和Date
            
            // 为三个mark直接提供值的散点图
            Chart{
                PointMark(x: .value("标记1的x坐标", "mark1X"),
                        y: .value("标记1的y坐标", 2))
                .foregroundStyle(.red)
                
                PointMark(x: .value("标记2的x坐标", "mark2X"),
                        y: .value("标记2的y坐标", 6))
                .foregroundStyle(.green)
                
                PointMark(x: .value("标记3的x坐标", "mark3X"),
                        y: .value("标记3的y坐标", 3))
                .foregroundStyle(.blue)
                
            }
            .frame(width: 200, height: 300)

Image.png

基于数据的Chart图表

在实际使用场景中，我们主要基于数组、文件或者数据库中的数据创建图表。正如List可以替代ForEach，Chart可以用和ForEach同样的方式来将数组拆成单个数据，在Closure中对数据进行逐个绘制。我们在下面的案例中对Animal数据点使用了BarMark，从而绘制了一个柱状图表。

import SwiftUI
import Charts

struct Animal: Identifiable {
   let id = UUID()
   let name: String
   let number: Int
   let color: Color
}

let animalsInZoo: [Animal] = [
   Animal(name: "Lion", number: 10, color: .yellow),
   Animal(name: "PolarBear", number: 12, color: .gray),
   Animal(name: "Fox", number: 20, color: .orange),
   Animal(name: "Parrot", number: 48, color: .red)
]



struct DataBasedChartTest: View {
   var body: some View {
       
       // Chart的此种使用方法与ForEach/List相同，
       Chart(animalsInZoo) { animal in    // 也可以省略animal in, 在使用animal的地方用$0直接引用第一个参数。
           
           BarMark(x: .value("AnimalName", animal.name),
                   y: .value("AnimalCount", Double(animal.number)))
           .foregroundStyle(animal.color)
       }
       .frame(width: 300, height: 300)
       
   }
}