Explore pie charts and interactivity in Swift Charts
Swift & UI 进阶 20m

探索 Swift Charts 的饼图和交互功能

Explore pie charts and interactivity in Swift Charts

2023年6月5日

在 Apple 官方观看视频

一句话判断

SectorMark 让饼图和甜甜圈图成为 Swift Charts 的一等公民，加上选择和滚动交互，数据可视化又上了一层楼。

这场 Session 讲了什么

Swift Charts 在 iOS 17 中引入了饼图和甜甜圈图的支持。新的 SectorMark 代表饼图中的一个扇形，位于极坐标系中。扇形大小与它代表的值成正比。设置 innerRadius 就能把饼图变成甜甜圈图。

从柱状图到饼图的转换极其简单——只需将 BarMark 替换为 SectorMark，将 x 参数替换为 angle。angularInset 创建扇形之间的间距，cornerRadius 提供圆角效果。甜甜圈中心的空间可以用来展示汇总信息。

交互方面新增了 chartXSelection/chartYSelection 修饰符，支持单值和范围选择。在 iOS 上通过点击选择，macOS 上通过悬停。选择后可以添加标注来展示详细信息。饼图也支持选择交互——点击扇形即可高亮。

可滚动图表通过 chartScrollableAxes 启用，chartXVisibleDomain 设置可见窗口大小，chartScrollPosition 追踪当前位置。scroll target behavior 支持对齐到日期单位。

值得深挖的点

标注的溢出处理是一个实用细节。当标注超出图表边界时，可以通过 overflow resolution 控制行为。X 轴上设置为 fit 确保标注不超出水平边界，Y 轴上禁用 resolution 让标注可以显示在图表上方。

可滚动图表构建在 SwiftUI 最新的 ScrollView 增强之上。滚动时轴标签随内容一起移动，非常流畅。配合 scroll target behavior，可以实现”滑动翻月”的体验。

代码片段

// 饼图
Chart(data) { item in
    SectorMark(
        angle: .value("销量", item.sales),
        innerDimension: .ratio(0.618), // 甜甜圈图
        angularInset: 1.5,
        cornerRadius: 5
    )
    .foregroundStyle(by: .value("类型", item.category))
}

// 选择交互
@State var selectedDate: Date?
Chart(data) { item in
    LineMark(x: .value("日期", item.date), y: .value("销量", item.sales))
}
.chartXSelection(value: $selectedDate)
.overlay {
    if let selected = selectedDate {
        RuleMark(x: .value("日期", selected))
            .annotation(position: .top) {
                // 弹出详情
            }
    }
}

// 可滚动图表
Chart(dailyData) { item in
    BarMark(x: .value("日期", item.date), y: .value("销量", item.sales))
}
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 30 * 24 * 3600) // 30天
.chartScrollPosition(initialX: startDate)
.scrollTargetBehavior(.viewAligned)

最佳实践

  • 使用 angularInset 和 cornerRadius 让饼图更精致
  • 甜甜圈中心空间适合展示汇总数据
  • chartXSelection 处理手势识别，你只需关注展示逻辑
  • macOS 上选择默认使用悬停手势
  • 可滚动图表配合 scroll target behavior 实现对齐翻页

还有什么值得关注

  • 参考 “Beyond Scroll Views” 了解 SwiftUI 滚动增强
  • 饼图的扇形选择非常有趣，适合探索型数据可视化
  • chartScrollPosition 帮你追踪当前可见区域
WWDC 2023