Tailwind CSSTailwind CSS
Home
  • Tailwind CSS 书籍目录
  • Vue 3 开发实战指南
  • React 和 Next.js 学习
  • TypeScript
  • React开发框架书籍大纲
  • Shadcn学习大纲
  • Swift 编程语言:从入门到进阶
  • SwiftUI 学习指南
  • 函数式编程大纲
  • Swift 异步编程语言
  • Swift 协议化编程
  • SwiftUI MVVM 开发模式
  • SwiftUI 图表开发书籍
  • SwiftData
  • ArkTS编程语言:从入门到精通
  • 仓颉编程语言:从入门到精通
  • 鸿蒙手机客户端开发实战
  • WPF书籍
  • C#开发书籍
learn
  • Java编程语言
  • Kotlin 编程入门与实战
  • /python/outline.html
  • AI Agent
  • MCP (Model Context Protocol) 应用指南
  • 深度学习
  • 深度学习
  • 强化学习: 理论与实践
  • 扩散模型书籍
  • Agentic AI for Everyone
langchain
Home
  • Tailwind CSS 书籍目录
  • Vue 3 开发实战指南
  • React 和 Next.js 学习
  • TypeScript
  • React开发框架书籍大纲
  • Shadcn学习大纲
  • Swift 编程语言:从入门到进阶
  • SwiftUI 学习指南
  • 函数式编程大纲
  • Swift 异步编程语言
  • Swift 协议化编程
  • SwiftUI MVVM 开发模式
  • SwiftUI 图表开发书籍
  • SwiftData
  • ArkTS编程语言:从入门到精通
  • 仓颉编程语言:从入门到精通
  • 鸿蒙手机客户端开发实战
  • WPF书籍
  • C#开发书籍
learn
  • Java编程语言
  • Kotlin 编程入门与实战
  • /python/outline.html
  • AI Agent
  • MCP (Model Context Protocol) 应用指南
  • 深度学习
  • 深度学习
  • 强化学习: 理论与实践
  • 扩散模型书籍
  • Agentic AI for Everyone
langchain
  • 附录 A:SwiftUI Charts API 参考

附录 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参数示例
创建折线图LineMarkx: .value("Day", day)
设置Y轴范围.chartYScaledomain: 0...100
添加点击手势.chartGestureMagnificationGesture()
动态更新数据@ObservedObjectvar dataModel: DataModel

提示:在 Xcode 中按住 ⌥ 键点击 API 可快速跳转到官方文档。

Last Updated:: 5/18/25, 10:44 AM