Warning
This article is extracted from the chat log with AI. Please identify it with caution.
第一步：了解 SwiftUI Charts 的基础
在开始之前，确保你对 SwiftUI 有一定的了解，因为 SwiftUI Charts 是基于 SwiftUI 的。如果你还不熟悉 SwiftUI，建议先学习 SwiftUI 的基本概念，比如视图、状态管理、布局等。
1.1 什么是 SwiftUI Charts？
SwiftUI Charts 是 Apple 在 iOS 16（及以上版本）中引入的一个框架，用于创建各种类型的图表，比如折线图、柱状图、饼图等。它提供了声明式的 API，让开发者可以轻松地将数据可视化集成到应用程序中。
1.2 学习目标
在这一步，我们的目标是：
- 了解 SwiftUI Charts 的基本用法。
- 搭建一个简单的开发环境。
- 创建你的第一个简单的图表。
1.3 设置开发环境
- 安装 Xcode：确保你已经安装了最新版本的 Xcode（至少是 Xcode 14，因为 SwiftUI Charts 是 iOS 16 引入的）。
- 创建一个新项目：
- 打开 Xcode，选择 “File” > “New” > “Project”。
- 选择 “App” 模板，确保 Interface 选择 “SwiftUI”，Language 选择 “Swift”。
- 设置项目名称，比如 “ChartsDemo”，然后点击 “Next” 保存项目。
- 检查目标 iOS 版本：确保你的项目目标是 iOS 16 或更高版本，因为 SwiftUI Charts 需要这个版本支持。
1.4 创建你的第一个图表
现在，我们来创建一个简单的柱状图（Bar Chart）作为起点。SwiftUI Charts 使用 Chart 视图来定义图表，数据通过 ChartData 协议提供。
- 打开
ContentView.swift文件，替换默认代码为以下内容：
swift
import Charts
import SwiftUI
struct ChatzzView: View {
var body: some View {
Chart {
BarMark(
x: .value("Name", "Alice"),
y: .value("Height (cm)", 165)
)
BarMark(
x: .value("Name", "Bob"),
y: .value("Height (cm)", 180)
)
BarMark(
x: .value("Name", "Charlie"),
y: .value("Height (cm)", 172)
)
}
.frame(height: 300)
.padding()
}
}
#Preview {
ChatzzView()
}import Charts
import SwiftUI
struct ChatzzView: View {
var body: some View {
Chart {
BarMark(
x: .value("Name", "Alice"),
y: .value("Height (cm)", 165)
)
BarMark(
x: .value("Name", "Bob"),
y: .value("Height (cm)", 180)
)
BarMark(
x: .value("Name", "Charlie"),
y: .value("Height (cm)", 172)
)
}
.frame(height: 300)
.padding()
}
}
#Preview {
ChatzzView()
}
- 运行项目（使用模拟器或真机），你会看到一个简单的柱状图，显示了三个类别（A、B、C）及其对应的值（50、30、70）。
1.5 理解代码
Chart：这是 SwiftUI Charts 的核心视图，用于定义一个图表。BarMark：表示柱状图中的一个柱子，x参数定义横轴的值（类别），y参数定义纵轴的值（数值）。.value：用于指定数据的标签和值，第一个参数是标签名，第二个参数是数据值。
Q&A
如何展示图例
可以使用.foregroundStyle(by: .value(..)) 的方式，例如：
swift
Chart {
// 身高数据系列
BarMark(
x: .value("Name", "Alice"),
y: .value("Height (cm)", 165)
)
.foregroundStyle(by: .value("Height", 165))
BarMark(
x: .value("Name", "Charlie"),
y: .value("Height (cm)", 172)
)
.foregroundStyle(by: .value("Height", 172))
BarMark(
x: .value("Name", "Bob"),
y: .value("Height (cm)", 180)
)
.foregroundStyle(by: .value("Height", 180))
}
// 确保图例可见
.chartLegend(.visible)
.frame(height: 350)Chart {
// 身高数据系列
BarMark(
x: .value("Name", "Alice"),
y: .value("Height (cm)", 165)
)
.foregroundStyle(by: .value("Height", 165))
BarMark(
x: .value("Name", "Charlie"),
y: .value("Height (cm)", 172)
)
.foregroundStyle(by: .value("Height", 172))
BarMark(
x: .value("Name", "Bob"),
y: .value("Height (cm)", 180)
)
.foregroundStyle(by: .value("Height", 180))
}
// 确保图例可见
.chartLegend(.visible)
.frame(height: 350)
或者如下的方式，需要指定.foregroundStyle(.blue) 的颜色。
swift
.chartForegroundStyleScale(
["Height": Color.blue, "Weight": Color.red])
// 确保图例可见
.chartLegend(.visible).chartForegroundStyleScale(
["Height": Color.blue, "Weight": Color.red])
// 确保图例可见
.chartLegend(.visible)示例:
swift
struct ContentView: View {
var body: some View {
Chart {
// 身高数据系列
BarMark(
x: .value("Name", "Alice"),
y: .value("Height (cm)", 165)
)
.foregroundStyle(.blue)
BarMark(
x: .value("Name", "Bob"),
y: .value("Height (cm)", 180)
)
.foregroundStyle(.blue)
BarMark(
x: .value("Name", "Charlie"),
y: .value("Height (cm)", 172)
)
.foregroundStyle(.blue)
// 体重数据系列
BarMark(
x: .value("Name", "Alice"),
y: .value("Weight (kg)", 55)
)
.foregroundStyle(.red)
BarMark(
x: .value("Name", "Bob"),
y: .value("Weight (kg)", 75)
)
.foregroundStyle(.red)
BarMark(
x: .value("Name", "Charlie"),
y: .value("Weight (kg)", 68)
)
.foregroundStyle(.red)
}
// 设置纵轴标题
.chartYAxisLabel("Value")
// 必须设置才能展示图例
.chartForegroundStyleScale(
["Height": Color.blue, "Weight": Color.red])
// 确保图例可见
.chartLegend(.visible)
// 增加图表高度以容纳图例
.frame(height: 350)
.padding()
}
} struct ContentView: View {
var body: some View {
Chart {
// 身高数据系列
BarMark(
x: .value("Name", "Alice"),
y: .value("Height (cm)", 165)
)
.foregroundStyle(.blue)
BarMark(
x: .value("Name", "Bob"),
y: .value("Height (cm)", 180)
)
.foregroundStyle(.blue)
BarMark(
x: .value("Name", "Charlie"),
y: .value("Height (cm)", 172)
)
.foregroundStyle(.blue)
// 体重数据系列
BarMark(
x: .value("Name", "Alice"),
y: .value("Weight (kg)", 55)
)
.foregroundStyle(.red)
BarMark(
x: .value("Name", "Bob"),
y: .value("Weight (kg)", 75)
)
.foregroundStyle(.red)
BarMark(
x: .value("Name", "Charlie"),
y: .value("Weight (kg)", 68)
)
.foregroundStyle(.red)
}
// 设置纵轴标题
.chartYAxisLabel("Value")
// 必须设置才能展示图例
.chartForegroundStyleScale(
["Height": Color.blue, "Weight": Color.red])
// 确保图例可见
.chartLegend(.visible)
// 增加图表高度以容纳图例
.frame(height: 350)
.padding()
}
}
图例位置可以通过代码调整：
swift
.chartLegend(position:.topLeading).chartLegend(position:.topLeading)柱状图顶部如何展示数字
添加annotation, 例如:
BarMark(
x: .value("Name", "Bob"),
y: .value("Height (cm)", 180)
)
.annotation(position: .top) {
Text("180")
}BarMark(
x: .value("Name", "Bob"),
y: .value("Height (cm)", 180)
)
.annotation(position: .top) {
Text("180")
}