附录 A:SwiftUI Charts API 参考
常用 API 和方法速查
以下是 SwiftUI Charts 框架(iOS 16+)的核心 API 和方法速查表,帮助开发者快速查阅关键功能。
1. 基础图表组件
Chart 容器
Chart(data: [DataPoint]) { ... } // 基础图表容器
Chart { ... } // 动态数据绑定方式
常用标记(Marks)
LineMark( // 折线图标记
x: .value("Label", value),
y: .value("Label", value)
)
BarMark( // 柱状图标记
x: .value("Label", value),
y: .value("Label", value),
width: .fixed(20)
)
PointMark( // 散点图标记
x: .value("Label", value),
y: .value("Label", value)
)
AreaMark( // 面积图标记
x: .value("Label", value),
yStart: .value("Min", min),
yEnd: .value("Max", max)
)
2. 坐标轴与图例
坐标轴配置
.chartXAxis { // X轴配置
AxisMarks(
values: .automatic,
preset: .aligned,
position: .bottom
)
}
.chartYAxis { // Y轴配置
AxisMarks(
values: .stride(by: 10),
grid: .visible()
)
}
图例配置
.chartLegend(position: .top) // 图例位置
.chartLegend(.visible) // 显示/隐藏图例
3. 样式与修饰符
颜色与样式
.foregroundStyle(.linearGradient(...)) // 渐变填充
.symbol(.circle) // 数据点形状
.lineStyle(StrokeStyle(lineWidth: 3)) // 线条样式
交互修饰符
.chartOverlay { proxy in ... } // 覆盖交互层
.chartGesture { proxy in ... } // 手势支持
.chartPlotStyle { plotArea in ... } // 绘图区域样式
4. 数据操作
数据转换
.chartXScale(domain: 0...100) // 手动设置X轴范围
.chartYScale(domain: .automatic) // 自动Y轴范围
.chartForegroundStyleScale( // 颜色映射
range: Gradient(colors: [.red, .blue])
)
5. 动画与过渡
.animation(.easeInOut(duration: 1.0)) // 基础动画
.chartAnimation(.spring()) // 图表专用动画
6. 实用扩展方法
// 计算平均值
extension Sequence where Element: Numeric {
func average() -> Double { ... }
}
// 日期格式化
extension Date {
func chartFormat() -> String { ... }
}
速查表示例
| 功能 | API | 参数示例 |
|---|---|---|
| 创建折线图 | LineMark | x: .value("Day", day) |
| 设置Y轴范围 | .chartYScale | domain: 0...100 |
| 添加点击手势 | .chartGesture | MagnificationGesture() |
| 动态更新数据 | @ObservedObject | var dataModel: DataModel |
提示:在 Xcode 中按住 ⌥ 键点击 API 可快速跳转到官方文档。
