当前位置：首页 > news >正文

WWDC 25 风云再起：SwiftUI 7 Charts 心法从 2D 到 3D 的华丽蜕变

news 2025/7/11 5:56:21

在这里插入图片描述

概述

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

在这里插入图片描述

而其中的 Charts 框架，更是如同江湖中的 “数据可视化宝典”那样，让各位秃头少侠们能够轻松将复杂的数据转化为直观易懂的图表。

在本篇武学秘籍中，您将学到如下内容：

- 概述
- 1. 江湖起源——原有 Charts 框架的武学修炼
- 2. 江湖变革——SwiftUI Charts 3D 图表来袭
- 3. 轻功飞行——SurfacePlot 打造梦幻曲面图
- 4. 握剑诀——交互与视角
- 5. 3D 图表修炼的注意事项
- - 5.1 避免数据过载
  - 5.2 谨慎选择图表类型
  - 5.3 性能优化不容忽视
- 6. 尾声：3D 图表开启数据可视化新纪元

那还等什么呢？各位初入江湖的豪客和“大虾”们，请随老夫一起进入图表的美妙世界吧！Let’s go！！！😉

1. 江湖起源——原有 Charts 框架的武学修炼

何曾几时，WWDC 2020（SwiftUI 4.0，iOS 16）江湖风起云涌，数不清的英雄豪杰和兵器纷繁复杂，数据可视化在其中占据了举足轻重的地位。

而正是在这样的背景下，SwiftUI 的 Charts 框架横空出世，犹如一位初出茅庐的少年剑客，虽然招式简单，却也灵活迅捷，迅速得到了武林各大门派的认可。

在这里插入图片描述

初入江湖的菜鸟侠客们可以通过它迅速绘制出柱状图、折线图和饼状图等基础武学，简单易懂，入门容易。记得那年，当 18 岁的列位秃头少侠们在代码中添加 Chart 时，心中便涌起一股非凡的成就感，仿佛宝子们也成为了数据江湖中的一员。

如下便是一个简单的柱状图的代码示例，犹如初入武林的少年，凭借一把利剑便能出奇制胜：

import SwiftUI
import Chartsstruct SimpleBarChart: View {let data: [Double] = [2, 3, 5, 7, 11, 13]var body: some View {Chart(data) { value inBarMark(x: .value("Value", value))}.chartXAxis {AxisMarks()}}
}

这就是“基本剑法”，以简洁利落见长，正如初出茅庐的剑客，刚刚踏入这个江湖那样的飘逸洒脱：

在这里插入图片描述

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

在这里插入图片描述

虽然二十步之内，便可知敌人风吹草动，然而一旦对手修炼到更高的境界，单靠这种平凡的武学便显得不足以应对复杂的数据纷争。

2. 江湖变革——SwiftUI Charts 3D 图表来袭

谁能想象，江湖中的一场风云变幻，竟会让 Charts 框架焕发新生。

在WWDC 25 上，苹果总舵主为这门熟悉的武功奥义又注入了新的活力，推出了 Chart3D。这不再是寻常的剑法，而是进入了三维的殿堂。就像一位绝世大侠，早已超越了平面世界的束缚，开始在三维空间中闪展腾挪。

在这里插入图片描述

这时的 Chart3D，犹如一位有了深厚内力的高手，能在三维空间中挥洒自如。宝子们不再仅仅是直线和曲线的过客，而是能在空间中将数据点、曲面、视角交织成一幅立体图景。

无论是点的组合，还是面的铺展，或是交互的旋转，每一处都透露着数据与现实世界的紧密联系。

快看这段代码，仿佛是大侠抬手之间，便可将复杂的数据织入眼前的三维世界那样畅快淋漓：

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 inlet 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 来用数学函数得偿所愿。

下面的代码犹如一套行云流水的剑法，将数学的深奥与图形的简洁相结合，点滴之间尽显工艺之精妙：

import SwiftUI
import Chartsstruct SurfacePlotChart: View {var body: some View {NavigationStack {Chart3D {SurfacePlot(x: "X", y: "Y", z: "Z") { x, z inlet 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 的强大之处不仅仅在于它能够描绘出三维的世界，更在于它提供了丰富的交互功能，能够根据需要调整视角，让宝子们从不同角度观看同一数据的图表，仿佛随时可以恣意改变剑法招式那般美妙。

在这里插入图片描述

以下代码示范了如何通过手势控制图表的旋转角度，并且设置初始的视角与相机投影，这种灵活性犹如大侠挥剑的自由度，让小伙伴们在数据的世界里遨游无碍：

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 inlet 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 心法展示")}}
}