探索 Swift Charts 中的饼图及交互性

探索 Swift Charts 中的饼图及交互性

Swift Charts 又回到了原点：准备好利用框架的最新改进以在 App 中制作饼图和环形图。了解如何让你的图表具备滚动功能，探索图表选择 API 以显示数据中的其他详细信息，并了解如何启用额外的交互功能使你的图表更加令人愉悦。

章节
- 0:20 - Pie charts
- 4:22 - Selection
- 7:49 - Scrolling
资源
- Visualizing your app’s data
- - 高清视频
  - 标清视频
相关视频

WWDC23
- 滚动视图进阶
- SwiftUI 的新功能
下载

♪ ♪
Richard：大叫好我是 Richard 今天我很高兴向你介绍 Swift Charts 中一些令人兴奋的新功能：饼图、选择和滚动我们首先从饼图开始 Swift Charts 提供了可组合、可定制的构建模块可供你创建各种类型的数据可视化最近 Swift Charts 新增了一个功能有趣巧妙的饼图饼图通过简单、常见的图形展示总值的类别构成方式例如这张图表可视化了我朋友餐车上的煎饼销售数据饼图没有坐标轴因此非常适用于对精度要求不高的非正式场合在广泛了解扇区是如何构成完整圆形的基础上扇区可以非常直观地可视化部分与整体的关系饼图深受用户喜爱的其中一个原因就是其具备圆且直观的图形你可以使用熟悉的基于标记的组合语法来创建饼图在这里我们引入一个新的标记类型 SectorMark SectorMark 代表饼图中的一个扇区并位于极空间中但可不是这个极地而是极坐标系并且扇区大小与其表示的数值成正比沿着半径你可以自定义扇区的外观如果我增加内半径饼图就会变成一个环形图使用 SectorMark 你可以轻松构建各种饼图和环形图我来给你举个例子我们的朋友共售卖 6 种口味的煎饼其去年国际煎饼餐车业务的日常销量大幅增长这个夏天我负责帮助他们改进销售 App
首先我用一个图表可视化最畅销的煎饼口味针对该目的当前 App 中有一个简单的堆积条形图该图表使用了一个 BarMark 并在 X 轴方向堆积销量由于这是分类数据所以类别由各个堆积条的前景样式进行表示尽管这个图表能够满足要求但我们还是将其转换为一个饼图来充分利用屏幕上的可用空间并将数据突出显示而我所要做的就是将 BarMark 和 x 参数替换为 SectorMark 和角度就可以了就是这么简单！
在 SectorMark 中我使用角度来表示销量接着你为饼图提供的角度值就会自动归一化为完整的圆形并且我还可以应用一些样式自定义在扇区上设置 angularInset 可以在扇区之间增加间隔这里我将扇区的 angularInset 设置为 1.5 点从而两个扇区之间的间隔是插入值的 2 倍即宽为 3 点此外我还设置了 cornerRadius 来让饼图成为完美的圆形只用了几行代码这个饼图看上去就已经很不错了但如果你还想尝试其他外观我们来将该图表转换为环形图
我将 innerRadius 设置为内半径和饼图半径的比值对我来说黄金比例看起来正合适但你也可能对环形图的厚度有不同的喜好在所有已售的煎饼中我们的赢家是 Cachapa 并已显示在图表上方但由于环形图中间是空心的我想将文本移动到图表中心我将文本放入 chartBackground 中并使用位置计算来保证文本位于环形洞的中心
现在这个环形图就很好看了以上就是饼图和环形图这两个图表可以很好地突出显示你的数据并可在大屏幕上呈现出色的效果接下来我来深入介绍一下图表交互功能首先我们从选择开始通过在表格中使用交互性你可以逐步展示额外的细节信息交互性支持用户使用多种形式的输入例如触摸来自然地探索数据
选择便是你与图表直接交互的一种方式其中 Apple 设计的图表例如心率图便是很好的例子只要选择坐标轴上的一点图表就会显示额外的信息让我们在煎饼销售 App 中实现这个想法
该 App 中的一个图表可视化了两个城市的每周日均销量
我将在该图表中启用数值选择通过可以显示选择那天煎饼销量的弹出框来展示具体销量
以下是该图表的定义方式每个城市都有一个数据系列并且系列中的每个元素都包含了一星期中的某一天以及销量然后根据城市名字设置线条样式你可能已经很熟悉 ChartOverlay 修饰符了该修饰符可以让你覆盖 SwiftUI 视图来捕捉手势但在 iOS 17 中我可以使用新的 ChartXSelection 修饰符该修饰符可以为我处理所有的手势识别并将选定的数值存储到绑定中
该选择修饰符会为我提供 X 轴上的原始日期值所以我可以定义一个计算属性来与折线图中的数据点进行匹配接下来我们来扩展图表当数值被选中时会显示一个弹出框
在选中一个数值后我会添加一个垂直标尺标记作为选择指示器我将其 Z 轴设置在默认 0 值的下方以保证标尺标记位于线条标记后方现在我们在选择指示器上方创建一个弹出框为此我会将自定义 SwiftUI 视图作为注释通常情况下注释位于图表中但在本例中弹出框超出了图表的边界所以我需要处理注释溢出的情况
在 X 轴上我将其设置为适应图表大小以确保弹出框永远无法超出图表的水平边界在 Y 轴上我禁用了overflowResolution 从而可以在图表正上方显示注释
通过使用选择绑定和带有注释的标尺标记我便创建了一个交互式折线图并且 Swift Charts 也支持在 macOS 上进行选择其中悬停手势是数值选择的默认手势
除了单个数值选择该图表选择修饰符的变体还允许你选择一个范围 iOS 中的默认手势为双指轻点而 macOS 中的则为拖动此外 Swift Charts 还允许你提供自定义的选择手势使用 ChartProxy 你可以基于手势位置选择一个数值
除了 X 和 Y 坐标上的图表之外图表的数值选择还可与饼图和环形图无缝结合轻点并突出显示扇形这样的操作非常有趣
所以归根结底选择旨在展示图表中额外的信息构成交互性的另一重要部分是浏览数据接下来我们来谈谈滚动
我想创建一个能够可视化一整年每日煎饼销量的图表但是将 365 天的数据都显示在屏幕上不太现实所以该图表必须支持滚动为了启用滚动我只需调用 chartScrollableAxes 修饰符借助 chartXVisibleDomain 我设置一个以 30 天为时间间隔的可见窗口为了在当前可见窗口中显示煎饼的总销量我会使用 ChartScrollPosition 将当前日期存储到绑定中现在我只用手指进行滚动即可
不仅图表会滚动轴的内容也会随之滚动并且非常顺滑流畅滚动可以通过几种不同的方式进行自定义例如我想在滚动时与日期单位保持对齐这样我们就需要引入滚动操作 ScrollTargetBehavior 是 SwiftUI 和 Swift Charts 的新增功能可以让你将滚动视图内容与数值对齐
为了实现我想要的对齐操作我将其设置为匹配每天的第一个小时而 MajorAlignment 通过定义滑动操作则可以实现进一步的自定义这里我将其设置为每个月的第一天这样当我滑动浏览图表时我就可以从每个月第一天开始
可滚动图表的构建基于 SwiftUI 中最新增强的滚动视图想要了解更多信息请观看“滚动视图外的内容”讲座 Swift Charts 为你提供了可视化数据的无限可能除了 X 和 Y 坐标上的图表饼图现在也是一种用于创建 Apple 设计图表的 API 饼图虽然简单但可视化功能十分强大并且在展示部分与整体数据关系时可以发挥最大的优势选择和滚动之类的交互功能为你可视化数据提供了全新的维度并让你的用户在探索数据中拥有完全的掌控权请尽情享受制作饼图和环形图的乐趣吧 ♪ ♪

Chart(data, id: \.name) { element in
  BarMark(
    x: .value("Sales", element.sales),
    stacking: .normalized
  )
  .foregroundStyle(by: .value("Name", element.name))
}
.chartXAxis(.hidden)

2:44 - Pie chart

Chart(data, id: \.name) { element in
  SectorMark(
    angle: .value("Sales", element.sales)
  )
  .foregroundStyle(by: .value("Name", element.name))
}

3:05 - Pie chart with angular inset

Chart(data, id: \.name) { element in
  SectorMark(
    angle: .value("Sales", element.sales),
    angularInset: 1.5
  )
  .foregroundStyle(by: .value("Name", element.name))
}

3:06 - Pie chart with corner radius

Chart(data, id: \.name) { element in
  SectorMark(
    angle: .value("Sales", element.sales),
    angularInset: 1.5
  )
  .cornerRadius(5)
  .foregroundStyle(by: .value("Name", element.name))
}

3:33 - Donut chart

Chart(data, id: \.name) { element in
  SectorMark(
    angle: .value("Sales", element.sales),
    innerRadius: .ratio(0.618),
    angularInset: 1.5
  )
  .cornerRadius(5)
  .foregroundStyle(by: .value("Name", element.name))
}

4:02 - Donut chart with text in the center

Chart(data, id: \.name) { element in
  SectorMark(
    angle: .value("Sales", element.sales),
    innerRadius: .ratio(0.618),
    angularInset: 1.5
  )
  .cornerRadius(5)
  .foregroundStyle(by: .value("Name", element.name))
}
.chartBackground { chartProxy in
  GeometryReader { geometry in
    let frame = geometry[chartProxy.plotAreaFrame]
    VStack {
      Text("Most Sold Style")
        .font(.callout)
        .foregroundStyle(.secondary)
      Text(mostSold)
        .font(.title2.bold())
        .foregroundColor(.primary)
    }
    .position(x: frame.midX, y: frame.midY)
  }
}

5:14 - Chart visualizing average sales by city

struct LocationDetailsChart: View {
  ...

  var body: some View {
    Chart {
      ForEach(data) { series in
        ForEach(series.sales, id: \.day) { element in
          LineMark(
            x: .value("Day", element.day, unit: .day),
            y: .value("Sales", element.sales)
          )
        }
        .foregroundStyle(by: .value("City", series.city))
        .symbol(by: .value("City", series.city))
        .interpolationMethod(.catmullRom)
      }
    }
    ...
  }
}

5:39 - Chart selection modifier

struct LocationDetailsChart: View {
  @Binding var rawSelectedDate: Date?

  var body: some View {
    Chart {
      ForEach(data) { series in
        ForEach(series.sales, id: \.day) { element in
          LineMark(
            x: .value("Day", element.day, unit: .day),
            y: .value("Sales", element.sales)
          )
        }
        .foregroundStyle(by: .value("City", series.city))
        .symbol(by: .value("City", series.city))
        .interpolationMethod(.catmullRom)
      }
    }
    .chartXSelection(value: $rawSelectedDate)
  }
}

5:47 - Processing raw selected date from chart selection binding

struct LocationDetailsChart: View {
  @Binding var rawSelectedDate: Date?

  var selectedDate: Date? {
    guard let rawSelectedDate else { return nil }
    return data.first?.sales.first(where: {
      let endOfDay = endOfDay(for: $0.day)
      return ($0.day ... endOfDay).contains(rawSelectedDate)
    })?.day
  }

  var body: some View {
    Chart {
      ForEach(data) { series in
        ForEach(series.sales, id: \.day) { element in
          LineMark(
            x: .value("Day", element.day, unit: .day),
            y: .value("Sales", element.sales)
          )
        }
        .foregroundStyle(by: .value("City", series.city))
        .symbol(by: .value("City", series.city))
        .interpolationMethod(.catmullRom)
      }
    }
    .chartXSelection(value: $rawSelectedDate)
  }
}

6:06 - Rule mark as selection indicator

Chart {
  ForEach(data) { series in
    ForEach(series.sales, id: \.day) { element in
      LineMark(
        x: .value("Day", element.day, unit: .day),
        y: .value("Sales", element.sales)
      )
    }
  }
  if let selectedDate {
    RuleMark(
      x: .value("Selected", selectedDate, unit: .day)
    )
    .foregroundStyle(Color.gray.opacity(0.3))
    .offset(yStart: -10)
    .zIndex(-1)
  }
}
.chartXSelection(value: $rawSelectedDate)

6:20 - Selection popover

Chart {
  ForEach(data) { series in
    ForEach(series.sales, id: \.day) { element in
      LineMark(
        x: .value("Day", element.day, unit: .day),
        y: .value("Sales", element.sales)
      )
    }
  }
  if let selectedDate {
    RuleMark(
      x: .value("Selected", selectedDate, unit: .day)
    )
    .foregroundStyle(Color.gray.opacity(0.3))
    .offset(yStart: -10)
    .zIndex(-1)
    .annotation(
      position: .top, spacing: 0,
      overflowResolution: .init(
        x: .fit(to: .chart),
        y: .disabled
      )
    ) {
      valueSelectionPopover
    }
  }
}
.chartXSelection(value: $rawSelectedDate)

7:07 - Range selection

Chart(data) { series in
  ForEach(series.sales, id: \.day) { element in
    LineMark(
      x: .value("Day", element.day, unit: .day),
      y: .value("Sales", element.sales)
    )
  }
  ...
}
.chartXSelection(value: $rawSelectedDate)
.chartXSelection(range: $rawSelectedRange)

7:22 - Overriding default selection gesture

Chart(data) { series in
  ForEach(series.sales, id: \.day) { element in
    LineMark(
      x: .value("Day", element.day, unit: .day),
      y: .value("Sales", element.sales)
    )
  }
  ...
}
.chartXSelection(value: $rawSelectedDate)
.chartGesture { proxy in
  DragGesture(minimumDistance: 0)
    .onChanged { proxy.selectXValue(at: $0.location.x) }
    .onEnded { _ in selectedDate = nil }
}

7:31 - Selection in pie charts and donut charts

Chart(data, id: \.name) { element in
  SectorMark(
    angle: .value("Sales", element.sales),
    innerRadius: .ratio(0.618),
    angularInset: 1.5
  )
  .cornerRadius(5)
  .foregroundStyle(by: .value("Name", element.name))
  .opacity(element.name == selectedName ? 1.0 : 0.3)
}
.chartAngleSelection(value: $selectedAngle)

7:54 - Daily sales chart

Chart {
  ForEach(SalesData.last365Days, id: \.day) {
    BarMark(
      x: .value("Day", $0.day, unit: .day),
      y: .value("Sales", $0.sales)
    )
  }
  .foregroundStyle(.blue)
}

8:07 - Daily sales chart with a scrollable axis

Chart {
  ForEach(SalesData.last365Days, id: \.day) {
    BarMark(
      x: .value("Day", $0.day, unit: .day),
      y: .value("Sales", $0.sales)
    )
  }
  .foregroundStyle(.blue)
}
.chartScrollableAxes(.horizontal)

8:11 - Setting the visible domain for a scrollable chart

Chart {
  ForEach(SalesData.last365Days, id: \.day) {
    BarMark(
      x: .value("Day", $0.day, unit: .day),
      y: .value("Sales", $0.sales)
    )
  }
  .foregroundStyle(.blue)
}
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 3600 * 24 * 30)

8:18 - Chart scroll position

Chart {
  ForEach(SalesData.last365Days, id: \.day) {
    BarMark(
      x: .value("Day", $0.day, unit: .day),
      y: .value("Sales", $0.sales)
    )
  }
  .foregroundStyle(.blue)
}
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 3600 * 24 * 30)
.chartScrollPosition(x: $scrollPosition)

8:50 - Snapping in a scrolling chart

Chart {
  ForEach(SalesData.last365Days, id: \.day) {
    BarMark(
      x: .value("Day", $0.day, unit: .day),
      y: .value("Sales", $0.sales)
    )
  }
  .foregroundStyle(.blue)
}
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 3600 * 24 * 30)
.chartScrollPosition(x: $scrollPosition)
.chartScrollTargetBehavior(
  .valueAligned(
    matching: DateComponents(hour: 0),
    majorAlignment: .matching(DateComponents(day: 1))))

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

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

章节

资源

相关视频

WWDC23