Swift Charts：提高标准

Swift Charts：提高标准

深入探索数据可视化：学习 Swift Charts 和 SwiftUI 如何通过各种图表选项帮助您的 App 呈现复杂的数据集。我们将介绍如何基于各种不同的数据进行绘制，并采用标记来创建更加精美的图表。我们还将带您了解 Swift Charts 的大量图表自定义 API，帮助您选择与您的 App 相符的图表样式。为能更好地理解此讲座，我们建议您先观看 WWDC22 的“认识 Swift Charts”。

资源
相关视频

Tech Talks
- 面向企业开发者的新功能
WWDC22
下载

♪ 柔和乐器演奏的嘻哈音乐 ♪ ♪ Donghao Ren：大家好我是 Donghao 本课将学习更多关于如何利用 Swift Charts 实现出色的数据可视化换句话说我们要精益求精让您的 App 用图表可以做更多事出色的数据可视化可以让 App 提供更多信息并且更具吸引力要在 App 中构建一个好图表有很多事情需要考虑当然我们希望我们的图表忠实地传达其内部数据并让所有人都能看到但是 App 中的图表并非存在于真空中它们是 App 用户界面的一部分必须能支持本地化和 OS 功能如深色模式图表必须有合适的布局可以与 UI 的其余部分无缝匹配图表应该支持动态类型和设备屏幕尺寸图表最好还可以在所有平台上运行并具有出色的动画效果以获得最佳观感很多这些基本功能 Swift Charts 都可以自动解决让您可以更多地把注意力放在建立最好的图表上以传达您独特的数据让每个人都可以使用 Swift Charts 能实现这些主要靠提供一套类似 SwiftUI 的声明式语法您只需少量代码就能在图表中指定想要的内容 Swift Charts 会自动生成可以直接使用的出色图表 Swift Charts 还提供丰富的自定义选项可以设置图表样式以匹配您的个性 App 本课的目的是帮助您对 Swift Charts 有更深入的了解我们首先介绍声明性语法的基本部件：标记和标记的组合下面举几个 Apple 产品中使用图表的例子如您所见有各种不同的数据图表类型和样式 Swift Charts 不是为每个图表类型都提供一个预构建组件而是按照组合来创建图表它将少量基本部件以不同的方式组合就能让您创建各种各样的图表了下面讲讲具体如何实现为此我要举个例子我所有的队友都喜欢吃煎饼所以我们有一个 App 用来跟踪一辆卖各种煎饼的餐车的订单这张图表显示了30 天内派送煎饼的数目按口味细分这种图表被称为条形图在 Swift Charts 中这样一条蓝色矩形就是一个标记标记是表征数据的图形元素这个条形标记显示最近 30 天内售出 Cachapa 的数量这张图表有六个条形标记每个代表一种煎饼口味以及相应的销售量我们看看这样的代码怎么写这个 SwiftUI 视图包含一个描述性标题比如“最畅销口味 Cachapa” 还有一个空图表这里的图表类型是定义单个图表的顶层视图可以像添加其他视图一样在您的 SwiftUI App 中添加图表接下来的课程我们重点讲图表部分图表中可以添加标记这里有一个 BarMark 显示 Cachapa 及其销售量这就是一个单条形标记的图表截图中可以看到图表跟用户界面的其余部分匹配并且有很好的默认样式比如说 X 轴上四舍五入的整数如果添加一个不同名称和销售量的条形标记就得到了第二个条形图可以重复此操作以添加更多条形标记我们可以在一个真实的 App 中以编程方式生成这些标记要做到这一点可以向图表提供一组结构或元组数组并使用 ForEach 来为元素的值创建条形标记如果 ForEach 是图表中唯一的内容就像这样也可以直接将数据放入图表中许多 SwiftUI 修改器都可用于标记比如可以使用 .foregroundStyle 修改器设置条形标记的颜色这里我们将其设置为一个命名颜色这样可以在 Xcode 中将其创建为一个命名资源有一点很重要图表必须每个人都可访问默认情况下图表会对支持自动生成访问元素的 VoiceOver 用户开放可以使用 .accessibilityLabel 和 .accessibilityValue 修改器来自定义比如这里我们将标签设为煎饼的名字值设为销售量加上“已售”为后缀于是旁边用户就能获得个性化体验了旁白：Cachapa 已售 916 个 Injera 已售 850 个 Crêpe 已售 802 个我们的 App 还可以按天来跟踪煎饼的售出情况这个视图显示了过去 30 天内煎饼的售出情况该图表详细地提供了每一天煎饼的售出情况我们看看制作这个图表的方法这里我们有一个日期和销售额数据的数组日期由 Date 值表示从早晨算起我们将可视化数据用条形图显示其中 x 显示日期此处的单位参数中 Date 表示一个日期所持续的时间 y 显示当天的销售额如右图所示这个条形图显示了这些天的销售量条形图并不是数据可视化的唯一方法我们再来试试折线图做折线图唯一不同的操作就是将 BarMark 换成 LineMark 使用声明式语法可以轻松地在 Swift Charts 中切换图表类型上一张图表显示了这一段时间内的总销售量不过这辆餐车在两个城市都有销售点我们想比较两个城市每个工作日的销售量来帮助我们决定去哪里此图表中的线条显示了周一至周日的销售量每条线代表一个城市我们看看这是如何构建的假设我们用一个元组数组定义两个城市的数据每个城市包含城市名称和每天的销售量然后我们使用 ForEach 在一系列数据中循环之前的折线图就完成了为了区分两个城市我们使用 .foregroundStyle(by:) 修改器按城市名称设置两行样式这里 Swift Charts 会自动给这两个城市选择颜色并将其添加到线条上然后添加一个图例来指示每种颜色的含义默认颜色是很容易区分的系统颜色为了让色盲的人也能读懂图表我们可以在线条上添加符号来进一步区分做法就是添加一个以城市为数据的 .symbol(by:) 修改器最后为了让线条看起来更流畅我们可以使用曲线作为线条的插值方法即使做好了两个折线图我们照样可以重新看回条形图将标记类型更改为 BarMark 并删除与条形标记无关的修改器就能得到一个堆叠条形图这些条形标记会自动堆叠因为我们现在每个月有两条数据虽然堆叠条形图非常适合显示两个城市的总销售量但用于两个城市之间的比较就不方便了为了更方便比较我们可以把它转化为带有 .position(by:) 修改器的簇状条形图到目前为止我们看了条形标记和线形标记 Swift Charts 也支持其他标记类型比如点标记区域标记规则标记和矩形标记这些标记还可以相互组合构建出更复杂的图表我们看一个例子我们先看一个显示每月平均日销售量的折线图虽然平均值很有用但我们还想查看最低和最高的每日销售量来了解它的极值我们可以先将这些值添加到数据中在数据数组中我们给每个元素输入每日最大值和每日最小值然后可以用区域标记来将最大值和最小值可视化其中 x 表示月份 y 则显示每日最小值和最大值之间的区域这样我们就得到了一个图表以线表示每日均值以其上下区域表示每日极值不过这类数据的可视化方法不止线加区域这一种您也可以轻松切换其他标记类型来探索更多设计选择例如这里我们用的就是 BarMark 不过这里的线似乎跟条形标记不太匹配不妨将线条标记改为 RectangleMark 高度设为两个点这样矩形标记就在条形标记里显示为一条短横线用来表示平均值您还可以调整这些标记的宽度比如这里我们将宽度比例设置为 0.6 意思是条形和矩形的宽度是一个月宽度的 60% 如截图所示最后我们还想设置一个显示所有月份平均日销售量的选项为此我们首先把前景样式设置为浅灰色以淡化前景然后在 ForEach 之外添加一个规则标记其中 y 表示平均值这样会添加一条横线为了清楚表明该横线表示年平均值我们可以用 .annotation 修改器为规则添加注释这样会在规则标记的顶部添加一个顶部对齐的文本标签我们介绍了几个利用组合来构建图表的例子使用和组合这些基本标记有许多方法比如箱线图多系列折线图人口金字塔范围图流图多系列散点图热度图甚至是矢量场图等等我这里只举了几个例子实际上用 Swift Charts 构建图表所能采用的图表种类还有很多现在我们继续下面的话题使用标记属性来绘制数据 Swift Charts 支持三种主要的数据类型定量数据、定类数据和时间数据定量数据是一个数值例如售出的产品数量房间的温度或股票价格等 Swift Charts 可以把不同 Swift 数值类型转化为定量数据如整数和单双精度浮点类型定类数据或名义数据表征的是离散的类别或组例如一个人的名字一片大陆或一个产品类型可以使用字符串或自定义字符串值的枚举来作为定性数据时间数据则用于表示时间点或时间段比如某一天的持续时间或某笔交易的确切时间等 Swift Charts 的“日期” 为时间数据图表的工作原理是将抽象数据比如销售量的值转化为标记的属性我们看看 BarMark 它可以用 X Y 值和前景样式属性来绘制数据在这个例子中我们用定量的销售量作为 x 属性用定性的名称作为 y 属性生成的图表由水平条形图组成每条的 X 值为销售额 Y 值为名称如果我们把名称和销售额翻转让名称作为 X 销售额作为 Y 就得到一个垂直条形图这里可以看到 BarMark 的行为取决于 X 和 Y 属性的数据类型条形图的方向则取决于定量属性所在的位置现在我们再看一个用全部三个属性来绘制的图表这里的 X 表示星期几是时间数据 Y 表示销量而前景样式表示城市生成的是一个堆叠条形图其中 X 轴显示星期几 Y 轴显示销售量条形颜色显示不同城市 Swift Charts 支持六种标记类型以及六个标记属性可以用来绘制数据因为数据有三种类型所以会有大量可能的组合这就是为什么 Swift Charts 可以只需少量基本部件就能实现丰富的图表设计用标记属性来绘制数据时比如用 Y 表示销售量 Swift Charts 会创建一个映射将抽象数据转换为适当的属性值像这里它会将销售量的值转换到屏幕中的 Y 坐标我们会使用“缩放”一词来表示像销售量这种抽象数据到像 Y 位置这种标记属性的映射可以将“缩放”视为一个函数该函数接受数据值并返回一个属性值例如这里有一个 yScale 函数该函数接受销售额并返回条状标记所在的 Y 之所以命名为“缩放” 是因为位置属性往往需要将输入值乘以某个因数进行缩放将其转换为合理的屏幕坐标使用标记属性绘制数据时会生成一个缩放比例来将数据转换为相应的标记属性例如在这张图表中我们有三个比例分别将星期几转换为 X 销售量转换为 Y 城市转换为前景风格 Swift Charts 会自动根据数据分析所采用的比例为您创建一个现成的漂亮图表可以使用缩放修改器配置图表中的比例我们看几个例子在本例中自动计算出的 Y 轴比例为 0 到 150 但是我们想固定 Y 的比例这样无论当前的销售情况如何 Y 的比例始终可以保持一致我们可以把它改为 Y 比例始终为 0 到 200 为此我们可以使用 .chartYScale 修改器将比例的范围设置为 0 到 200 现在可以看到轴的值域为 0 到 200 了同样我们也使用 .chartForegroundStyleScale 修改器改变这两个城市映射到前景样式的方式现在我们两个城市的颜色就变了现在我们知道如何组合标记并使用标记属性绘制数据了接下来再来深入了解更多 Swift Charts 提供的自定义选项吧图表由轴组成可能配有图例还有一个绘制区轴和图例能帮助我们解读图表而绘图区域就是两个轴之间的区域这就是我们用标记来绘制数据的地方所有这些元素都可以在 Swift Charts 中自定义我们先来看几个例子如何自定义轴和图例这是一张显示每月总销售量的图表无需自定义的话 Swift Charts 默认会将轴的值四舍五入现在 X 轴给每个季度都显示一个标签我们把它改成每个月一个标签吧并使用一个字母来作为月份标签首先我们添加一个 .chartXAxis 修改器来自定义 X 轴以 AxisMarks 为内容不带参数的话 AxisMarks 创建的就是默认轴我们先从更改轴值开始由于我们想要固定的日期间隔因此可以使用 stride(by:) 跟标准库中的 stride 函数类似现在我们每个月都有一个标签了但是默认标签感觉太挤了从截图中可以看出来一些标签被截断了因为空间不够了我们把标签显示为单个字母吧为此可以从单个成分建立轴标记包括 AxisGridLine AxisTick 和 AxisValueLabel 将标签的格式设置为使用窄月份名称现在每个月都显示为一个字母了结果生成器中收到的参数值可以提供当前轴值的信息可以用它来定义轴标记的位置和风格例如这里设置了一个条件用来测试日期的值是否为一个季度的第一个月是的话就可以将其突出显示为不同的前景风格如果不是就只显示一条网格线没有刻度和标签由于现在显示的是季度我们可以将格式更改为季度样式通过刚刚的自定义我们得到一个更具个性的 X 轴用以显示季度数据其中有次级网格可以显示每个月份除了值轴标记还有其他属性可以用来配置总体外观和样式假设我们想让 Y 轴出现在图表的前沿而不是默认的后沿可以将位置参数设置为前沿就能将其移动到前沿了 Swift Charts 会根据轴和所绘数据的类型来为轴标记提供默认预设可以用预设参数来覆盖默认值例如这里的 Y 轴就用了 .extended 预设来将 Y 轴与用户界面的其余部分对齐某些图表可能不想展示轴例如这上面的销售图表只想显示大致的销售情况就不需要显示轴了可以将 .hidden 输入到图表的轴修改器中将轴隐藏图例的配置与轴的配置类似例如这张突出显示最佳日期和位置的图表已经用了不透明度来突出显示最佳城市了所以可以隐藏自动生成的图例为此可以添加 .chartLegend 修改器以 .hidden 作为参数现在再来讲一下绘图区可以使用 .chartPlotStyle 修改器来配置图表的绘图区在尾随闭包中我们会编写一个函数输入原始的绘图区并返回修改后的绘图区我们看几个例子有时候我们可能想让绘图区有一个精确的尺寸或纵横比例如这里我们想要绘图区的高度由图表中的类别数量来决定为此我们可以将 .frame 修改器应用到绘图区并返回修改后的绘图区这样绘图区的高度就设置好了修改器还能用来实现特殊的视觉效果例如在这个暗模式图表中我们使用了 .background 修改器来添加粉红色背景不透明度设为 0.2 以突出显示图表然后添加一个同样是粉红色的 1 pt 边框这就为图表制造了一种独特的视觉效果前面我们提到了缩放即能将数据值映射到 X 和 Y 等标记属性的函数 Swift Charts 提供了一个 ChartProxy 允许读取图表中的 X 和 Y 比例可以用 ChartProxy 的 position(for:) 方法来获取给定数据值的位置或使用 value(at:) 方法来获取给定位置的数据值这样就能将其他视图与当前图表相匹配我们看一个例子我们要构建一个交互式拖动视图可以在这里通过拖动来选择图表中某段区间该区间将用于过滤详情视图中的行图表代理对象可以从 .chartOverlay 或 .chartBackground 修改器中获取这两个修改器类似于 SwiftUI 的叠加层和背景修改器但可以提供图表代理要构建这个例子我们可以像以前一样先定义基本图表然后添加一个 .chartOverlay 修改器修改器可以提供图表代理代理中有一个几何阅读器可以读取图层视图的几何形状然后就有了一个对 SwiftUI 的 DragGesture 有所响应的矩形视图了拖动时首先找到图表绘图区 x 坐标的起点和当前位置其范围就是手势提供的位置减去绘图区的起点有了这些坐标我们就可以使用图表代理来找到相应的日期值最后将其设置为 SwiftUI 状态来记录当前日期范围有了范围的状态就能在图表中定义一个矩形标记将当前选定的日期范围可视化这个状态也可以用来控制 App 的其他部分例如用来过滤图表下方详情视图的内容这是一个简单的例子用来说明图表代理的用途它能用来构建许多有趣的功能例如这个交互式图表显示所选日期和销售量的值可以覆盖一个棒棒糖图层本节课程讨论了如何通过组合标记创建图表如何使用标记属性绘制数据以及如何自定义图表您还可以收看设计教程了解如何使用图表设计出色的 App 界面以及如何高效设计图表我们相信您会喜欢利用 Swift Charts 来构建数据可视化感谢收看 ♪

import SwiftUI
import Charts

struct TopStyleChart: View {
    let data = [
        (name: "Cachapa", sales: 916),
        (name: "Injera", sales: 850),
        (name: "Crêpe", sales: 802),
        (name: "Jian Bing", sales: 753),
        (name: "Dosa", sales: 654),
        (name: "American", sales: 618)
    ]

    var body: some View {
        Chart(data, id: \.name) {
            BarMark(
                x: .value("Sales", $0.sales),
                y: .value("Name", $0.name)
            )
            // Set the foreground style of the bars.
            .foregroundStyle(.pink)
            // Customize the accessibility label and value.
            .accessibilityLabel($0.name)
            .accessibilityValue("\($0.sales) sold")
        }
    }
}

5:12 - Daily sales chart

struct DailySalesChart: View {
    var body: some View {
        Chart {
            ForEach(dailySales, id: \.day) {
                // Try change to LineMark.
                BarMark( 
                    x: .value("Day", $0.day, unit: .day),
                    y: .value("Sales", $0.sales)
                )
            }
        }
    }
  
    let dailySales: [(day: Date, sales: Int)] = [
        (day: date(year: 2022, month: 5, day: 8), sales: 168),
        (day: date(year: 2022, month: 5, day: 9), sales: 117),
        (day: date(year: 2022, month: 5, day: 10), sales: 106),
        (day: date(year: 2022, month: 5, day: 11), sales: 119),
        (day: date(year: 2022, month: 5, day: 12), sales: 109),
        (day: date(year: 2022, month: 5, day: 13), sales: 104),
        (day: date(year: 2022, month: 5, day: 14), sales: 196),
        (day: date(year: 2022, month: 5, day: 15), sales: 172),
        (day: date(year: 2022, month: 5, day: 16), sales: 122),
        (day: date(year: 2022, month: 5, day: 17), sales: 115),
        (day: date(year: 2022, month: 5, day: 18), sales: 138),
        (day: date(year: 2022, month: 5, day: 19), sales: 110),
        (day: date(year: 2022, month: 5, day: 20), sales: 106),
        (day: date(year: 2022, month: 5, day: 21), sales: 187),
        (day: date(year: 2022, month: 5, day: 22), sales: 187),
        (day: date(year: 2022, month: 5, day: 23), sales: 119),
        (day: date(year: 2022, month: 5, day: 24), sales: 160),
        (day: date(year: 2022, month: 5, day: 25), sales: 144),
        (day: date(year: 2022, month: 5, day: 26), sales: 152),
        (day: date(year: 2022, month: 5, day: 27), sales: 148),
        (day: date(year: 2022, month: 5, day: 28), sales: 240),
        (day: date(year: 2022, month: 5, day: 29), sales: 242),
        (day: date(year: 2022, month: 5, day: 30), sales: 173),
        (day: date(year: 2022, month: 5, day: 31), sales: 143),
        (day: date(year: 2022, month: 6, day: 1), sales: 137),
        (day: date(year: 2022, month: 6, day: 2), sales: 123),
        (day: date(year: 2022, month: 6, day: 3), sales: 146),
        (day: date(year: 2022, month: 6, day: 4), sales: 214),
        (day: date(year: 2022, month: 6, day: 5), sales: 250),
        (day: date(year: 2022, month: 6, day: 6), sales: 146)
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: .init(year: year, month: month, day: day)) ?? Date()
}

6:16 - Sales by location with line mark

struct LocationsChart: View {
    var body: some View {
        Chart {
            ForEach(seriesData, id: \.city) { series in
                ForEach(series.data, id: \.weekday) {
                    LineMark(
                        x: .value("Weekday", $0.weekday, unit: .day),
                        y: .value("Sales", $0.sales)
                    )
                }
                .foregroundStyle(by: .value("City", series.city))
                .symbol(by: .value("City", series.city))
                .interpolationMethod(.catmullRom)
            }
        }
    }

    let seriesData = [
        (
            city: "Cupertino", data: [
                (weekday: date(year: 2022, month: 5, day: 2), sales: 54),
                (weekday: date(year: 2022, month: 5, day: 3), sales: 42),
                (weekday: date(year: 2022, month: 5, day: 4), sales: 88),
                (weekday: date(year: 2022, month: 5, day: 5), sales: 49),
                (weekday: date(year: 2022, month: 5, day: 6), sales: 42),
                (weekday: date(year: 2022, month: 5, day: 7), sales: 125),
                (weekday: date(year: 2022, month: 5, day: 8), sales: 67)
            ]
        ),
        (
            city: "San Francisco", data: [
                (weekday: date(year: 2022, month: 5, day: 2), sales: 81),
                (weekday: date(year: 2022, month: 5, day: 3), sales: 90),
                (weekday: date(year: 2022, month: 5, day: 4), sales: 52),
                (weekday: date(year: 2022, month: 5, day: 5), sales: 72),
                (weekday: date(year: 2022, month: 5, day: 6), sales: 84),
                (weekday: date(year: 2022, month: 5, day: 7), sales: 84),
                (weekday: date(year: 2022, month: 5, day: 8), sales: 137)
            ]
        )
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

7:19 - Sales by location with bar mark

struct LocationsChart: View {
    var body: some View {
        Chart {
            ForEach(seriesData, id: \.city) { series in
                ForEach(series.data, id: \.weekday) {
                    BarMark(
                        x: .value("Weekday", $0.weekday, unit: .day),
                        y: .value("Sales", $0.sales)
                    )
                }
                .foregroundStyle(by: .value("City", series.city))
                .position(by: .value("City", series.city))
            }
        }
    }

    let seriesData = [
        (
            city: "Cupertino", data: [
                (weekday: date(year: 2022, month: 5, day: 2), sales: 54),
                (weekday: date(year: 2022, month: 5, day: 3), sales: 42),
                (weekday: date(year: 2022, month: 5, day: 4), sales: 88),
                (weekday: date(year: 2022, month: 5, day: 5), sales: 49),
                (weekday: date(year: 2022, month: 5, day: 6), sales: 42),
                (weekday: date(year: 2022, month: 5, day: 7), sales: 125),
                (weekday: date(year: 2022, month: 5, day: 8), sales: 67)
            ]
        ),
        (
            city: "San Francisco", data: [
                (weekday: date(year: 2022, month: 5, day: 2), sales: 81),
                (weekday: date(year: 2022, month: 5, day: 3), sales: 90),
                (weekday: date(year: 2022, month: 5, day: 4), sales: 52),
                (weekday: date(year: 2022, month: 5, day: 5), sales: 72),
                (weekday: date(year: 2022, month: 5, day: 6), sales: 84),
                (weekday: date(year: 2022, month: 5, day: 7), sales: 84),
                (weekday: date(year: 2022, month: 5, day: 8), sales: 137)
            ]
        )
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

8:02 - Monthly sales with line and area marks

struct MonthlySalesChart: View {
    var body: some View {
        Chart {
            ForEach(data, id: \.month) {
                AreaMark(
                    x: .value("Month", $0.month, unit: .month),
                    yStart: .value("Daily Min", $0.dailyMin),
                    yEnd: .value("Daily Max", $0.dailyMax)
                )
                .opacity(0.3)
                LineMark(
                    x: .value("Month", $0.month, unit: .month),
                    y: .value("Daily Average", $0.dailyAverage)
                )
            }
        }
    }

    let data = [
        (month: date(year: 2021, month: 7), sales: 3952, dailyAverage: 127, dailyMin: 95, dailyMax: 194),
        (month: date(year: 2021, month: 8), sales: 4044, dailyAverage: 130, dailyMin: 96, dailyMax: 189),
        (month: date(year: 2021, month: 9), sales: 3930, dailyAverage: 131, dailyMin: 101, dailyMax: 184),
        (month: date(year: 2021, month: 10), sales: 4217, dailyAverage: 136, dailyMin: 96, dailyMax: 193),
        (month: date(year: 2021, month: 11), sales: 4006, dailyAverage: 134, dailyMin: 104, dailyMax: 202),
        (month: date(year: 2021, month: 12), sales: 3994, dailyAverage: 129, dailyMin: 96, dailyMax: 190),
        (month: date(year: 2022, month: 1), sales: 4202, dailyAverage: 136, dailyMin: 96, dailyMax: 203),
        (month: date(year: 2022, month: 2), sales: 3749, dailyAverage: 134, dailyMin: 98, dailyMax: 200),
        (month: date(year: 2022, month: 3), sales: 4329, dailyAverage: 140, dailyMin: 104, dailyMax: 218),
        (month: date(year: 2022, month: 4), sales: 4084, dailyAverage: 136, dailyMin: 93, dailyMax: 221),
        (month: date(year: 2022, month: 5), sales: 4559, dailyAverage: 147, dailyMin: 104, dailyMax: 242),
        (month: date(year: 2022, month: 6), sales: 1023, dailyAverage: 170, dailyMin: 120, dailyMax: 250)
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

8:46 - Monthly sales with bar and rectangle marks

struct MonthlySalesChart: View {
    var body: some View {
        Chart {
            ForEach(data, id: \.month) {
                BarMark(
                    x: .value("Month", $0.month, unit: .month),
                    yStart: .value("Daily Min", $0.dailyMin),
                    yEnd: .value("Daily Max", $0.dailyMax),
                    width: .ratio(0.6)
                )
                .opacity(0.3)
                RectangleMark(
                    x: .value("Month", $0.month, unit: .month),
                    y: .value("Daily Average", $0.dailyAverage),
                    width: .ratio(0.6),
                    height: 2
                )
            }
        }
    }

    let data = [
        (month: date(year: 2021, month: 7), sales: 3952, dailyAverage: 127, dailyMin: 95, dailyMax: 194),
        (month: date(year: 2021, month: 8), sales: 4044, dailyAverage: 130, dailyMin: 96, dailyMax: 189),
        (month: date(year: 2021, month: 9), sales: 3930, dailyAverage: 131, dailyMin: 101, dailyMax: 184),
        (month: date(year: 2021, month: 10), sales: 4217, dailyAverage: 136, dailyMin: 96, dailyMax: 193),
        (month: date(year: 2021, month: 11), sales: 4006, dailyAverage: 134, dailyMin: 104, dailyMax: 202),
        (month: date(year: 2021, month: 12), sales: 3994, dailyAverage: 129, dailyMin: 96, dailyMax: 190),
        (month: date(year: 2022, month: 1), sales: 4202, dailyAverage: 136, dailyMin: 96, dailyMax: 203),
        (month: date(year: 2022, month: 2), sales: 3749, dailyAverage: 134, dailyMin: 98, dailyMax: 200),
        (month: date(year: 2022, month: 3), sales: 4329, dailyAverage: 140, dailyMin: 104, dailyMax: 218),
        (month: date(year: 2022, month: 4), sales: 4084, dailyAverage: 136, dailyMin: 93, dailyMax: 221),
        (month: date(year: 2022, month: 5), sales: 4559, dailyAverage: 147, dailyMin: 104, dailyMax: 242),
        (month: date(year: 2022, month: 6), sales: 1023, dailyAverage: 170, dailyMin: 120, dailyMax: 250)
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

9:19 - Monthly sales with average line and annotation

struct MonthlySalesChart: View {
    var body: some View {
        Chart {
            ForEach(data, id: \.month) {
                BarMark(
                    x: .value("Month", $0.month, unit: .month),
                    yStart: .value("Daily Min", $0.dailyMin),
                    yEnd: .value("Daily Max", $0.dailyMax),
                    width: .ratio(0.6)
                )
                .opacity(0.3)
                RectangleMark(
                    x: .value("Month", $0.month, unit: .month),
                    y: .value("Daily Average", $0.dailyAverage),
                    width: .ratio(0.6),
                    height: 2
                )
            }
            .foregroundStyle(.gray.opacity(0.5))

            RuleMark(
                y: .value("Average", averageValue)
            )
            .lineStyle(StrokeStyle(lineWidth: 3))
            .annotation(position: .top, alignment: .leading) {
                Text("Average: \(averageValue, format: .number)")
                    .font(.headline)
                    .foregroundStyle(.blue)
            }
        }
    }

    let data = [
        (month: date(year: 2021, month: 7), sales: 3952, dailyAverage: 127, dailyMin: 95, dailyMax: 194),
        (month: date(year: 2021, month: 8), sales: 4044, dailyAverage: 130, dailyMin: 96, dailyMax: 189),
        (month: date(year: 2021, month: 9), sales: 3930, dailyAverage: 131, dailyMin: 101, dailyMax: 184),
        (month: date(year: 2021, month: 10), sales: 4217, dailyAverage: 136, dailyMin: 96, dailyMax: 193),
        (month: date(year: 2021, month: 11), sales: 4006, dailyAverage: 134, dailyMin: 104, dailyMax: 202),
        (month: date(year: 2021, month: 12), sales: 3994, dailyAverage: 129, dailyMin: 96, dailyMax: 190),
        (month: date(year: 2022, month: 1), sales: 4202, dailyAverage: 136, dailyMin: 96, dailyMax: 203),
        (month: date(year: 2022, month: 2), sales: 3749, dailyAverage: 134, dailyMin: 98, dailyMax: 200),
        (month: date(year: 2022, month: 3), sales: 4329, dailyAverage: 140, dailyMin: 104, dailyMax: 218),
        (month: date(year: 2022, month: 4), sales: 4084, dailyAverage: 136, dailyMin: 93, dailyMax: 221),
        (month: date(year: 2022, month: 5), sales: 4559, dailyAverage: 147, dailyMin: 104, dailyMax: 242),
        (month: date(year: 2022, month: 6), sales: 1023, dailyAverage: 170, dailyMin: 120, dailyMax: 250)
    ]

    let averageValue = 137
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

13:54 - Chart with custom scales for Y and foreground style

struct LocationsChart: View {
    var body: some View {
        Chart {
            ForEach(seriesData, id: \.city) { series in
                ForEach(series.data, id: \.weekday) {
                    LineMark(
                        x: .value("Weekday", $0.weekday, unit: .day),
                        y: .value("Sales", $0.sales)
                    )
                }
                .foregroundStyle(by: .value("City", series.city))
                .symbol(by: .value("City", series.city))
                .interpolationMethod(.catmullRom)
            }
        }
        .chartYScale(domain: 0 ... 200)
        .chartForegroundStyleScale([
            "San Francisco": .orange,
            "Cupertino": .pink
        ])
    }
  
    let seriesData = [
        (
            city: "Cupertino", data: [
                (weekday: date(year: 2022, month: 5, day: 2), sales: 54),
                (weekday: date(year: 2022, month: 5, day: 3), sales: 42),
                (weekday: date(year: 2022, month: 5, day: 4), sales: 88),
                (weekday: date(year: 2022, month: 5, day: 5), sales: 49),
                (weekday: date(year: 2022, month: 5, day: 6), sales: 42),
                (weekday: date(year: 2022, month: 5, day: 7), sales: 125),
                (weekday: date(year: 2022, month: 5, day: 8), sales: 67)
            ]
        ),
        (
            city: "San Francisco", data: [
                (weekday: date(year: 2022, month: 5, day: 2), sales: 81),
                (weekday: date(year: 2022, month: 5, day: 3), sales: 90),
                (weekday: date(year: 2022, month: 5, day: 4), sales: 52),
                (weekday: date(year: 2022, month: 5, day: 5), sales: 72),
                (weekday: date(year: 2022, month: 5, day: 6), sales: 84),
                (weekday: date(year: 2022, month: 5, day: 7), sales: 84),
                (weekday: date(year: 2022, month: 5, day: 8), sales: 137)
            ]
        )
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

15:16 - Chart with custom X axis

struct MonthlySalesChart: View {
    var body: some View {
        Chart(data, id: \.month) {
            BarMark(
                x: .value("Month", $0.month, unit: .month),
                y: .value("Sales", $0.sales)
            )
        }
        .chartXAxis {
            AxisMarks( values: .stride(by: .month) ) { value in
                AxisGridLine()
                AxisTick()
                AxisValueLabel(
                    format: .dateTime.month(.narrow)
                )
            }
        }
    }

    let data = [
        (month: date(year: 2021, month: 7), sales: 3952),
        (month: date(year: 2021, month: 8), sales: 4044),
        (month: date(year: 2021, month: 9), sales: 3930),
        (month: date(year: 2021, month: 10), sales: 4217),
        (month: date(year: 2021, month: 11), sales: 4006),
        (month: date(year: 2021, month: 12), sales: 3994),
        (month: date(year: 2022, month: 1), sales: 4202),
        (month: date(year: 2022, month: 2), sales: 3749),
        (month: date(year: 2022, month: 3), sales: 4329),
        (month: date(year: 2022, month: 4), sales: 4084),
        (month: date(year: 2022, month: 5), sales: 4559),
        (month: date(year: 2022, month: 6), sales: 1023)
    ]

    let averageValue = 137
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

16:17 - Chart with custom X axis and conditional content for axis marks

struct MonthlySalesChart: View {
    var body: some View {
        Chart(data, id: \.month) {
            BarMark(
                x: .value("Month", $0.month, unit: .month),
                y: .value("Sales", $0.sales)
            )
        }
        .chartXAxis {
            AxisMarks(values: .stride(by: .month)) { value in
                if value.as(Date.self)!.isFirstMonthOfQuarter {
                    AxisGridLine().foregroundStyle(.black)
                    AxisTick().foregroundStyle(.black)
                    AxisValueLabel(
                        format: .dateTime.month(.narrow)
                    )
                } else {
                    AxisGridLine()
                }
            }
        }
    }

    let data = [
        (month: date(year: 2021, month: 7), sales: 3952),
        (month: date(year: 2021, month: 8), sales: 4044),
        (month: date(year: 2021, month: 9), sales: 3930),
        (month: date(year: 2021, month: 10), sales: 4217),
        (month: date(year: 2021, month: 11), sales: 4006),
        (month: date(year: 2021, month: 12), sales: 3994),
        (month: date(year: 2022, month: 1), sales: 4202),
        (month: date(year: 2022, month: 2), sales: 3749),
        (month: date(year: 2022, month: 3), sales: 4329),
        (month: date(year: 2022, month: 4), sales: 4084),
        (month: date(year: 2022, month: 5), sales: 4559),
        (month: date(year: 2022, month: 6), sales: 1023)
    ]

    let averageValue = 137
}

extension Date {
    var isFirstMonthOfQuarter: Bool {
        Calendar.current.component(.month, from: self) % 3 == 1
    }
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

17:00 - Chart with custom Y axis

struct MonthlySalesChart: View {
    var body: some View {
        Chart(data, id: \.month) {
            BarMark(
                x: .value("Month", $0.month, unit: .month),
                y: .value("Sales", $0.sales)
            )
        }
        .chartYAxis {
            AxisMarks( preset: .extended, position: .leading)
        }
    }

    let data = [
        (month: date(year: 2021, month: 7), sales: 3952),
        (month: date(year: 2021, month: 8), sales: 4044),
        (month: date(year: 2021, month: 9), sales: 3930),
        (month: date(year: 2021, month: 10), sales: 4217),
        (month: date(year: 2021, month: 11), sales: 4006),
        (month: date(year: 2021, month: 12), sales: 3994),
        (month: date(year: 2022, month: 1), sales: 4202),
        (month: date(year: 2022, month: 2), sales: 3749),
        (month: date(year: 2022, month: 3), sales: 4329),
        (month: date(year: 2022, month: 4), sales: 4084),
        (month: date(year: 2022, month: 5), sales: 4559),
        (month: date(year: 2022, month: 6), sales: 1023)
    ]

    let averageValue = 137
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

18:26 - Chart with plot area style

struct TopStyleChart: View {
    var body: some View {
        Chart(data, id: \.name) {
            BarMark(
                x: .value("Sales", $0.sales),
                y: .value("Name", $0.name)
            )
            // Set the foreground style of the bars.
            .foregroundStyle(.pink)
            // Customize the accessibility label and value.
            .accessibilityLabel($0.name)
            .accessibilityValue("\($0.sales) sold")
        }
        .chartPlotStyle { plotArea in
            plotArea.frame(height: 60 * 6)
                    .background(.pink.opacity(0.2))
                    .border(.pink, width: 1)
        }
    }

    let data = [
        (name: "Cachapa", sales: 916),
        (name: "Injera", sales: 850),
        (name: "Crêpe", sales: 802),
        (name: "Jian Bing", sales: 753),
        (name: "Dosa", sales: 654),
        (name: "American", sales: 618)
    ]
}

20:03 - Chart with brushing interaction

struct InteractiveBrushingChart: View {
    @State var range: (Date, Date)? = nil

    var body: some View {
        Chart {
            ForEach(data, id: \.day) {
                LineMark(
                    x: .value("Month", $0.day, unit: .day),
                    y: .value("Sales", $0.sales)
                )
                .interpolationMethod(.catmullRom)
                .symbol(Circle().strokeBorder(lineWidth: 2))
            }
            if let (start, end) = range {
                RectangleMark(
                    xStart: .value("Selection Start", start),
                    xEnd: .value("Selection End", end)
                )
                .foregroundStyle(.gray.opacity(0.2))
            }
        }
        .chartOverlay { proxy in
            GeometryReader { nthGeoItem in
                Rectangle().fill(.clear).contentShape(Rectangle())
                    .gesture(DragGesture()
                        .onChanged { value in
                            // Find the x-coordinates in the chart’s plot area.
                            let xStart = value.startLocation.x - nthGeoItem[proxy.plotAreaFrame].origin.x
                            let xCurrent = value.location.x - nthGeoItem[proxy.plotAreaFrame].origin.x
                            // Find the date values at the x-coordinates.
                            if let dateStart: Date = proxy.value(atX: xStart),
                               let dateCurrent: Date = proxy.value(atX: xCurrent) {
                                range = (dateStart, dateCurrent)
                            }
                        }
                        .onEnded { _ in range = nil } // Clear the state on gesture end.
                    )
            }
        }
    }

    let data: [(day: Date, sales: Int)] = [
        (day: date(year: 2022, month: 5, day: 8), sales: 168),
        (day: date(year: 2022, month: 5, day: 9), sales: 117),
        (day: date(year: 2022, month: 5, day: 10), sales: 106),
        (day: date(year: 2022, month: 5, day: 11), sales: 119),
        (day: date(year: 2022, month: 5, day: 12), sales: 109),
        (day: date(year: 2022, month: 5, day: 13), sales: 104),
        (day: date(year: 2022, month: 5, day: 14), sales: 196),
        (day: date(year: 2022, month: 5, day: 15), sales: 172),
        (day: date(year: 2022, month: 5, day: 16), sales: 122),
        (day: date(year: 2022, month: 5, day: 17), sales: 115),
        (day: date(year: 2022, month: 5, day: 18), sales: 138),
        (day: date(year: 2022, month: 5, day: 19), sales: 110),
        (day: date(year: 2022, month: 5, day: 20), sales: 106),
        (day: date(year: 2022, month: 5, day: 21), sales: 187),
        (day: date(year: 2022, month: 5, day: 22), sales: 187),
        (day: date(year: 2022, month: 5, day: 23), sales: 119),
        (day: date(year: 2022, month: 5, day: 24), sales: 160),
        (day: date(year: 2022, month: 5, day: 25), sales: 144),
        (day: date(year: 2022, month: 5, day: 26), sales: 152),
        (day: date(year: 2022, month: 5, day: 27), sales: 148),
        (day: date(year: 2022, month: 5, day: 28), sales: 240),
        (day: date(year: 2022, month: 5, day: 29), sales: 242),
        (day: date(year: 2022, month: 5, day: 30), sales: 173),
        (day: date(year: 2022, month: 5, day: 31), sales: 143),
        (day: date(year: 2022, month: 6, day: 1), sales: 137),
        (day: date(year: 2022, month: 6, day: 2), sales: 123),
        (day: date(year: 2022, month: 6, day: 3), sales: 146),
        (day: date(year: 2022, month: 6, day: 4), sales: 214),
        (day: date(year: 2022, month: 6, day: 5), sales: 250),
        (day: date(year: 2022, month: 6, day: 6), sales: 146)
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

资源

相关视频

Tech Talks

WWDC22