认识 Swift Charts

♪ 柔和乐器演奏的嘻哈音乐 ♪ ♪ Dominik Moritz： 大家好 我是 Dominik 很高兴 向大家介绍 Swift Charts 这是 Apple 的新框架 用于在 SwiftUI 中 制作信息丰富且令人愉悦的图表 我们被数据所环绕 数据为我们了解世界 和做出更好的决策 提供了前所未有的资源 然而 数据本身并没有多大用处 为了使数据有用 我们必须理解数据 设计良好且易于访问的数据可视化 可以清楚地传达复杂数据 并将数据转化为观点和知识 在 Apple 我们花了数年时间研究 可视化的最佳实践 我们认识到 当图表显示 数据周围其他有用的上下文时 其效果最好 例如股票价格在某个时间范围内的 趋势和波动 您上次锻炼期间的心率 以及晚上何时天会变凉 在我们使用图表的所有平台上 这些只是众多例子中的一部分 今天 我很高兴向您介绍一个新框架 以便您在 App 中 制作信息丰富且令人愉悦的图表 向 Swift Charts 打个招呼吧 Swift Charts 是一个灵活的框架 用于制作 Apple 设计的图表 它使用与 SwiftUI 相同的 声明式语法 所以您已经 对 Swift Charts 的语言有所了解了 今天 让我们使用 Swift Charts 制作一些信息丰富 易于访问且令人愉悦的可视化图表 在团队中 我们一直在帮助 一辆弹出式煎饼食品卡车 使用 App 跟踪其销售情况 这辆卡车供应各种国际风味的 香甜可口的煎饼 如 Cachapa、Injera、Crêpe 中式煎饼、Dosa 或美式煎饼 在过去的 30 天内 该食品卡车供应了 超过 4500 张这些样式的煎饼 Cachapa 是最受欢迎的煎饼种类 这个 App 已经在标题中 显示了最重要的信息 让我们添加一个图表来显示 这六种煎饼的详细情况 为了在 Swift Charts 中 制作这种可视化图表 我们可以使用 与 SwiftUI 相同的声明式语法 在 Swift Charts 中 您可以通过组合来构建图表 条形图的主要组成部分是条形 它们是数据中每个项目的可视元素 Swift Charts 将这些可视元素 称为“标记” 让我们进入 Xcode 来制作这个图表 我们从添加图表开始 为了制作条形 我在 Chart 中添加一个 BarMark 要显示代表 Cachapa 数量的条形 我们必须设置名称和销量

我们将此条形的 x 位置设置为 煎饼名称的值 在本例中为“Cachapa” .value 工厂方法的第一个参数 是值的描述 第二个参数是值本身 现在我们在预览中得到一个条形 y 属性描述每个条形的高度 在此应设置为 Cachapa 的销量 即 916 为了表示我们没有直接设置 条形的位置或高度 我们使用了 .value 方法 Swift Charts 不仅可以 自动创建条形 还可以为 x 轴和 y 轴上的条形 自动创建表示条形长度含义的标签 让我们为 Injera 添加第二个条形 其销量为 850

现在 建立个人标记 并看到它们出现在 App 中 是一个时髦的做法 但是 我们通常想要创建一个 由结构数组之类的集合驱动的图表 首先 我将为煎饼销量添加 一个结构体

它包括名称 名称是一个字符串 以及食品卡车的煎饼销量 销量是一个整数 因为我们想用它来重复 所以我们让它可识别

并定义一个 返回名称的 ID 计算属性 现在我们可以将数据集 创建为煎饼数组 我们可以从外部数据源加载它 但在这里我们将在代码中定义它 除了 Cachapa 和 Injera 我们还添加了Crêpe 我们可以用 ForEach 驱动条形图数据 首先 删除第二个条形

我们现在需要做的就是 用 ForEach 重复 BarMark

我选择“element”作为 循环中变量的名称

然后我们可以用 element.name 来表示 x

用 element.sales 来表示 y

如果 ForEach 是图表中唯一的内容 我们也可以将数据直接放入 图表初始化程序中

我们现在可以为中式煎饼、Dosa 和美式煎饼添加剩余的三个条目

随着我们向数组中添加更多的条目 图表中添加了新的条形标记 最后 我们看到 标签之间的距离越来越近 通过交换 x 和 y 我们转置图表 并为每个条形的标签提供更多空间 Swift Charts 框架会自动选择 合适的轴样式 使您的图表更美观 这样 我们就在 Swift Charts 中制作了 我们的第一个数据可视化图表 通过使用 Xcode 中的新变体功能 我们可以看到 这个图表 在深色模式下看起来很美观 适应不同的字体大小

设备尺寸和方向 并支持可访问性

要访问以可视表现形式呈现的数据 您需要有看的能力 Swift Charts 将可视化的数据 公开给 VoiceOver 这样大家都可以探索 受欢迎的煎饼的细节 当我在 VoiceOver 中浏览图表时 它会说出煎饼的名称和销量 旁白：Cachapa 916 Injera 850 Crêpe 802 中式煎饼 753 Dosa 654 美式煎饼 618 Dominik：当然 该图表支持 Apple 于 2021 年推出的 Audio Graphs 功能 包括发音 旁白：描述图表 图表详细信息 播放 Audio Graph 完成 Dominik：我们刚刚使用 Swift Charts 向食品卡车 App 添加了 一个信息丰富且易于访问的图表 该图表显示了食品卡车售出的 每种样式的煎饼数量 除了每种煎饼样式的总结 它还提供了食品卡车每天的销售数据 这辆卡车可能停在库比蒂诺或旧金山 我们想帮助它了解在一周的不同日子 可以在哪里停车 为了回答这个问题 让我们将数据可视化为 这两个城市的时间序列 为了了解探索不同的设计是多么容易 我们将对该图表进行三次迭代 首先 我们将为库比蒂诺制作条形图 然后 我们将添加旧金山的数据 和一个选择器 最后 我们会把数据组合成 一个多序列折线图 让我们从显示一周中 每天平均煎饼销量 的条形图开始 销售数据将星期几存储为日期格式 将卡车的煎饼销量存储为整数形式 库比蒂诺的数据 在变量 cupertinoData 中 和之前一样 我们开始制作 带有 BarMark 的图表 我们将条形的 x 位置 设置为日期中的日数

将高度设置为销量

这样我们就得到了图表的第一次迭代 该图表显示了库比蒂诺 一周中每天的销售数据 在第二次迭代中 让我们添加旧金山的数据 通过使用此图表 我们想帮助煎饼车确定 一周中在哪里停车 旧金山的销售数据 在变量 sfData 中 我们想在这两个城市之间切换 并查看每个城市的条形图 我们首先添加一个状态变量 city 然后我们将 city 的 SwiftUI 选择器添加到 View 中

为了通过变量 city 在两个城市的 销售总结之间切换 我们为变量 data 添加一个 switch 语句

我们现在要做的就是 将库比蒂诺的数据替换为 在库比蒂诺和旧金山这两者之间 切换的数据 如果我点按切换键 图表就会在两个城市之间切换 Swift Charts 可与 SwiftUI 动画结合使用 因此如果我们 指定使用 easeInOut 以动画的形式进行过渡 那么当我在两个城市之间切换时 条形图会显示动画 并且也是每次只显示一个城市的数据

这样我们的 App 就有了 合适的外观和感觉 作为我们的最后一次迭代 我们将在折线图中 同时显示这两个序列 为了制作这个折线图 我们从之前的 库比蒂诺条形图开始 库比蒂诺和旧金山的数据 在一个序列数组中 序列结构体包含城市和销售数据 在显示这两个序列之前 让我们先关注库比蒂诺的数据 在图表中 我们可以 循环遍历序列数据 请记住 图表初始化程序 就像 ForEach 一样

然后我们可以将库比蒂诺的具体数据 替换为该序列的销售数据

为了区分这两个城市的数据 我希望条形的颜色由城市决定 为此 我们将 foregroundStyle 设置为源自该序列中的城市

为了显示一种颜色代表什么城市 Swift Charts 在图表下方 创建了一个图例 现在 我添加第二个城市的数据

正如您在预览中看到的那样 Swift Charts 自动为旧金山选择一种颜色 并在图表中同时显示两个城市的条形 图表显示的数据具有特定的上下文 可视化可能需要 随着数据或问题的变化而变化 Swift Charts 让您可以 轻松地快速更改图表 以探索不同的设计 堆叠条形图非常适合 显示每天的总平均销量 但是如果我想在两个城市之间 进行比较该怎么办？ 也许散点图或折线图会更好 我们将标记类型从 BarMark 改为 PointMark 以便将售出的煎饼显示为点状 或者将其改为 LineMark 以便将数据显示为折线图 折线图适合显示销售数据 因为它可以让我们比较 两个城市在一周中的每一天的数据 图表可以组合多个标记 例如 我可以 添加一个 PointMark

为了在没有颜色的情况下区分序列 我们将符号设置为源自城市

现在每个点都通过颜色和符号 来表示城市 因为在线上显示点很常见 Swift Charts 使用了 简略表达方式 在此我们将符号修饰符 应用于 LineMark 点的样式根据线而调整 这个图表很棒 我们可以轻松地比较整周的销售趋势 我们观察到旧金山周日的 销量特别高 Swift Charts 让我们很容易 在几分钟内迭代许多设计 最后 让我们看看 Swift Charts 如何让快速迭代变得简单 同时又足够灵活 以便将图表无缝集成到 App 的独特风格中 在 Swift Charts 中 您可以 通过组合标记和标记属性来构建图表 在 Pancake App 中 我们 用三种不同的标记 和四种标记属性组成了图表 例如 我们制作了一个简单的条形图 作为具有 X 和 Y 属性的条形标记 我们还更改了标记 以快速探索设计方案 例如包含点标记的图表 或使用具有 X 和 Y 属性的线标记 的折线图

我们还看到 我们可以添加属性 如前景样式 以便在折线图中显示多个序列 而且图表不必只有一个标记 我们将点和线相结合 用两个标记属性显示相同的值 Swift Charts 支持的 标记和标记属性 比我们今天使用的还要多 它还具有可扩展性 您可以添加自定义标记 通过标记和标记属性 Swift Charts 可以 使用少量的声明性构建块 表达各种图表设计 您可以通过多种方式组合这些构建块 为您的 App 创建优质的 数据可视化图表 再加上 SwiftUI 已经提供的功能 可能性真的是无穷无尽 正如我今天向您展示的那样 您可以免费获得对深色模式 不同设备屏幕尺寸 动态类型 VoiceOver 和 Audio Graphs 的支持 此外 Swift Charts 还支持 高对比度模式 最后 Swift Charts 可以跨地区工作 并且是多平台的 具有相同代码的图表 可用于所有 Apple 平台 而且相同的自定义设置 在任何地方都适用 因此您可以为每个平台定制图表 今天 我展示了 Swift Charts 如何使用 SwiftUI 强大的组合语法 让您可以用更少的代码 制作更多的图表 Swift Charts 还提供了 一组丰富的自定义选项 这样您就可以调整图表样式 以匹配您的 App 现在您已经知道 如何开辟新领域和制作图表 您可以在文档和我们的后续讲座中 学习如何以更高的标准自定义图表 ♪