如何在Swift Charts中为坐标轴添加标签与单位说明

核心实现逻辑 #

Swift Charts 开放了坐标轴的完全自定义能力，不需要引入第三方库，直接在chartXAxis/chartYAxis的构建闭包中追加自定义AxisValueLabel，即可实现坐标轴末端的单位、描述类标签，和标注的红色标签效果一致。

• 原有刻度标记可以保留，只需要额外新增一组AxisMarks专门用来渲染轴标签
• 可以通过anchor参数、padding调整标签的对齐位置，通过foregroundColor、font修改标签样式
• 标签锚定的坐标轴数值可以直接取当前轴的最大值/最小值，动态数据场景不需要写死固定值，标签会自动跟随轴范围调整位置

可直接复用的修改后代码 #

import SwiftUI
import Charts

struct ContentView: View {
    
    struct ChartData: Identifiable {
        var id: Double { xVal }
        let xVal: Double
        let yVal: Double
    }
    
    let data: [ChartData] = [
        .init(xVal: -5, yVal: 5),
        .init(xVal: 0, yVal: 10),
        .init(xVal: 5, yVal: 20),
    ]
    
    var body: some View {
        Chart(data) {
            LineMark(
                x: .value("Position", $0.xVal),
                y: .value("Height", $0.yVal)
            )
        }
        .chartYAxis {
            // 保留原有Y轴左侧的默认刻度
            AxisMarks(position: .leading)
            // 追加Y轴单位标签，锚定Y轴最大值位置
            AxisMarks(position: .leading, values: [20]) { _ in
                AxisValueLabel(anchor: .topTrailing) {
                    Text("Height (cm)")
                        .font(.caption)
                        .foregroundColor(.red) // 匹配示例红色标注效果，实际使用可删除
                        .padding(.bottom, 4)
                }
            }
        }
        .chartXAxis {
            // 保留原有X轴底部的默认刻度
            AxisMarks(position: .bottom)
            // 追加X轴单位标签，锚定X轴最大值位置
            AxisMarks(values: [5]) { _ in
                AxisValueLabel(anchor: .topTrailing) {
                    Text("Position (m)")
                        .font(.caption)
                        .foregroundColor(.red)
                        .padding(.leading, 4)
                }
            }
        }
        .padding()
    }
}

灵活扩展方案 #

如果内置的AxisValueLabel布局无法满足需求（比如需要竖排Y轴标签、标签完全脱离坐标轴刻度范围），可以直接用ZStack叠放Chart和自定义Text组件，通过offset手动调整标签位置，自由度更高，适配所有自定义排版需求。

内容的提问来源于stack exchange，提问作者Hundley