
概述
在 iOS 开发这个波谲云诡的江湖中,SwiftUI 可谓是一位后起之秀,以其简洁明快的招式迅速在 UI 框架领域中崭露头角。

而其中的 Charts 框架,更是如同江湖中的 "数据可视化宝典"那样,让各位秃头少侠们能够轻松将复杂的数据转化为直观易懂的图表。
在本篇武林秘籍中,列位少侠将会领悟如下招式:
-
- 江湖起源------原有 Charts 框架的武学修炼
-
- 江湖变革------SwiftUI Charts 3D 图表来袭
-
- 轻功飞行------SurfacePlot 打造梦幻曲面图
-
- 握剑诀------交互与视角
-
- 3D 图表修炼的注意事项
- 5.1 避免数据过载
- 5.2 谨慎选择图表类型
- 5.3 性能优化不容忽视
-
- 尾声:3D 图表开启数据可视化新纪元
那还等什么呢?各位初入江湖的豪客和"大虾"们,请随老夫一起进入图表的美妙世界吧!Let's go!!!;)
1. 江湖起源------原有 Charts 框架的武学修炼
何曾几时,WWDC 2020(SwiftUI 4.0,iOS 16)江湖风起云涌,数不清的英雄豪杰和兵器纷繁复杂,数据可视化在其中占据了举足轻重的地位。
而正是在这样的背景下,SwiftUI 的 Charts
框架横空出世,犹如一位初出茅庐的少年剑客,虽然招式简单,却也灵活迅捷,迅速得到了武林各大门派的认可。

初入江湖的菜鸟侠客们可以通过它迅速绘制出柱状图、折线图和饼状图等基础武学,简单易懂,入门容易。记得那年,当 18 岁的列位秃头少侠们在代码中添加 Chart
时,心中便涌起一股非凡的成就感,仿佛宝子们也成为了数据江湖中的一员。
如下便是一个简单的柱状图的代码示例,犹如初入武林的少年,凭借一把利剑便能出奇制胜:
swift
import SwiftUI
import Charts
struct SimpleBarChart: View {
let data: [Double] = [2, 3, 5, 7, 11, 13]
var body: some View {
Chart(data) { value in
BarMark(x: .value("Value", value))
}
.chartXAxis {
AxisMarks()
}
}
}
这就是"基本剑法",以简洁利落见长,正如初出茅庐的剑客,刚刚踏入这个江湖那样的飘逸洒脱:

随着修炼的深入,少侠们会逐渐意识到,这种图表只能为大家在江湖中打下些许基础,但它也暴露出了一些不足。

虽然二十步之内,便可知敌人风吹草动,然而一旦对手修炼到更高的境界,单靠这种平凡的武学便显得不足以应对复杂的数据纷争。
2. 江湖变革------SwiftUI Charts 3D 图表来袭
谁能想象,江湖中的一场风云变幻,竟会让 Charts
框架焕发新生。
在WWDC 25 上,苹果总舵主为这门熟悉的武功奥义又注入了新的活力,推出了 Chart3D
。这不再是寻常的剑法,而是进入了三维的殿堂。就像一位绝世大侠,早已超越了平面世界的束缚,开始在三维空间中闪展腾挪。

这时的 Chart3D
,犹如一位有了深厚内力的高手,能在三维空间中挥洒自如。宝子们不再仅仅是直线和曲线的过客,而是能在空间中将数据点、曲面、视角交织成一幅立体图景。
无论是点的组合,还是面的铺展,或是交互的旋转,每一处都透露着数据与现实世界的紧密联系。
快看这段代码,仿佛是大侠抬手之间,便可将复杂的数据织入眼前的三维世界那样畅快淋漓:
swift
struct ContentView: View {
let data = [(2,5), (3,7), (5,11), (7,8), (11,20), (13,10)]
var body: some View {
NavigationStack {
Chart3D(data.indices, id: \.self) { index in
let item = data[index]
PointMark(
x: .value("X", item.0),
y: .value("Y", item.1),
z: .value("Z", index)
)
.foregroundStyle(.red.gradient)
}
.chartXAxisLabel("X轴")
.chartYAxisLabel("Y轴")
.chartZAxisLabel("Z轴")
.navigationTitle("Charts 心法展示")
}
}
}
此时,数据不仅停留在纸面上,而是跃然于三维空间之中,犹如剑客挥舞长剑,刺破苍穹:

现在,列为微秃小少侠们可以随心所欲地操控每一个数据点的位置,仿佛掌握了整个空间的节奏,就问你们赞不赞呢?
3. 轻功飞行------SurfacePlot 打造梦幻曲面图
在武林中,总有一些高手以轻盈如风的身法著称,他们步伐矫健,时隐时现。而 SurfacePlot
就如同这般,能够以平滑的曲面将两个变量之间的关系展现得淋漓尽致。

它能让小伙伴们不再拘泥于线条和点,而是化繁为简,把复杂的数据关系化作一张优美的曲面,轻盈地在三维空间中随意漂浮。
如果宝子们想描绘一条像"乾坤大挪移"般自由流畅的曲线,那便可以借助 SurfacePlot
来用数学函数得偿所愿。
下面的代码犹如一套行云流水的剑法,将数学的深奥与图形的简洁相结合,点滴之间尽显工艺之精妙:
swift
import SwiftUI
import Charts
struct SurfacePlotChart: View {
var body: some View {
NavigationStack {
Chart3D {
SurfacePlot(x: "X", y: "Y", z: "Z") { x, z in
let h = hypot(x, z)
return sin(h) / h * 2
}
.foregroundStyle(.heightBased)
}
.chartXScale(domain: -10...10)
.chartZScale(domain: -10...10)
.chartYScale(domain: -0.23...10)
.navigationTitle("Chart3D 心法传功")
}
}
}
这就像是武林中的一招"飞燕回旋",优雅、流畅,同时又极具威力:

当各位微秃侠客们把数学函数转化为三维曲面,它就不再只是抽象的公式,而是化身为一场精彩的武林争斗,令人叹为观止。
4. 握剑诀------交互与视角
然而,江湖变幻莫测,如何在纷繁复杂的数据中保持清醒的视角,便成为了每个剑客面临的严峻挑战。
Chart3D
的强大之处不仅仅在于它能够描绘出三维的世界,更在于它提供了丰富的交互功能,能够根据需要调整视角,让宝子们从不同角度观看同一数据的图表,仿佛随时可以恣意改变剑法招式那般美妙。

以下代码示范了如何通过手势控制图表的旋转角度,并且设置初始的视角与相机投影,这种灵活性犹如大侠挥剑的自由度,让小伙伴们在数据的世界里遨游无碍:
swift
struct ContentView: View {
@State var data = [(Int,Int)]()
private func createData() {
for _ in 0...99 {
let x = Int.random(in: 0...100)
let y = Int.random(in: 0...100)
data.append((x, y))
}
}
@State private var pose = Chart3DPose(
azimuth: .degrees(20), // 水平角度
inclination: .degrees(15) // 垂直角度
)
var body: some View {
NavigationStack {
Chart3D(data.indices, id: \.self) { index in
let item = data[index]
PointMark(
x: .value("X", item.0),
y: .value("Y", item.1),
z: .value("Z", index)
)
.foregroundStyle(.red.gradient)
}
.task {
createData()
}
.chartXAxisLabel("X轴")
.chartYAxisLabel("Y轴")
.chartZAxisLabel("Z轴")
.chart3DPose($pose)
.navigationTitle("Charts 心法展示")
}
}
}
宝子们可以像大侠操控剑气那般,调整图表的角度与视野,每一次变化,都能带来全新的观感与体验:

同样我们略施小计,之前的曲面图也可以如法炮制:

从此,数据的世界也因此变得不再单调,而是充满了无限可能。
5. 3D 图表修炼的注意事项
5.1 避免数据过载
虽然 3D 图表能够展示丰富的数据信息,但在使用时也要注意避免数据过载。过多的数据点或过于复杂的数据维度,会让图表变得混乱不堪,就像武林高手在战斗中面对过多的敌人,反而会陷入困境。开发者需要对数据进行筛选和精简,突出重点,确保图表清晰可读性。
5.2 谨慎选择图表类型
不同的图表类型适用于不同的数据展示场景,在使用 3D 图表时,要根据数据的特点和分析目的,谨慎选择合适的图表样式。
例如,3D 柱状图适合用于对比数据,3D 散点图适合分析数据之间的关系,而 3D 饼图则不太适合这些场景,因为在三维空间中,饼图的角度和比例可能会让人产生视觉误解。
选择合适的图表类型,就像武林高手选择了合适的兵器,才能发挥出最大威力。
5.3 性能优化不容忽视
由于 3D 图表的渲染和计算量较大,容易对应用的性能产生影响。因此,在开发过程中,要注重性能优化。
可以采用异步加载数据、使用高效的数据结构和算法、合理利用缓存等方法,确保图表的加载和交互丝一般流畅顺滑,不给用户带来卡顿体验。否则,就像内力不足的武林高手,招式施展起来也会大打折扣。
6. 尾声:3D 图表开启数据可视化新纪元
从最初的 2D 图表到如今的 3D 图表,SwiftUI 7 的 Charts 框架在数据可视化的江湖中不断进化,为开发者们提供了越来越强大的工具。
3D 图表的出现,不仅让数据可视化变得更加生动、直观,也为武林高手们开辟了一片全新的江湖。
在这里,宝子们可以凭借自己的智慧和技艺,运用 3D 图表这一绝世神功,将数据的魅力展现得淋漓尽致,为用户带来前所未有的数据探索体验。

在未来的 iOS 开发江湖中,3D 图表必将成为开发者们手中的一把利器,助力他们在数据可视化领域中披荆斩棘,创造出更多令人惊叹的应用。而每一位开发者,都将在这个充满机遇与挑战的江湖中,书写属于自己的传奇故事。让我们怀揣着对技术的热爱和追求,勇敢地踏入这片新江湖,探索 3D 图表的无限未来吧!
此时,数据的江湖,已经不再是一个简单的平面,而是充满了三维空间的无限元宇宙,正如你们已然成为了这片江湖中举世无双的大侠一样,棒棒哒!
那么,感谢各位少侠的观赏!再会啦!8-)