如何在Swift Charts图表中点顶部添加带垂直线至折线的注释？

步骤说明 #

1. 结构化存储图表数据：不能在ForEach里临时生成随机值，必须提前保存x/y对应关系，才能稳定获取中点的y值。
2. 计算横向中点：根据数据数组的索引直接取中点的x值，再匹配对应的y值。
3. 用RuleMark绘制垂直线：从折线的中点位置延伸到图表顶部。
4. 用TextMark添加顶部注释：放在垂直线顶端，调整位置避免和线条重叠。

完整代码示例 #

import SwiftUI
import Charts

// 定义结构化数据模型
struct ChartData: Identifiable {
    let id = UUID()
    let x: Int
    let y: Int
}

struct ContentView: View {
    // 提前生成并保存图表数据
    let data = (0...10).map { ChartData(x: $0, y: Int.random(in: 0...20)) }
    // 计算横向中点的x值
    let midX = 5
    // 取出中点x对应的y值
    let midY: Int
    
    init() {
        midY = data.first(where: { $0.x == midX })?.y ?? 0
    }
    
    var body: some View {
        Chart {
            // 绘制折线
            ForEach(data) { item in
                LineMark(
                    x: .value("X轴", item.x),
                    y: .value("Y轴", item.y)
                )
            }
            
            // 绘制垂直线：从折线中点到图表顶部
            RuleMark(
                x: .value("中点X", midX),
                yStart: .value("中点Y", midY),
                yEnd: .plotAreaMaxY // 动态适配图表顶部边界
            )
            .foregroundStyle(.blue)
            .lineStyle(StrokeStyle(lineWidth: 1.5, dash: [2, 2])) // 可选：设置虚线样式
            
            // 添加顶部文本注释
            TextMark(
                x: .value("中点X", midX),
                y: .plotAreaMaxY,
                text: .value("注释", "中点值: \(midY)")
            )
            .foregroundStyle(.blue)
            .offset(y: -12) // 向上偏移避免和线条重叠
            .font(.caption.bold())
        }
        .padding()
    }
}

关键细节 #

• 如果x轴是连续数值（比如Double）而非整数，需要通过插值计算中点x对应的y值，可结合相邻数据点的斜率手动推导。
• .plotAreaMaxY能动态获取图表绘图区域的顶部边界，比固定数值更适配不同数据范围。
• 可通过lineStyle自定义垂直线的粗细、虚实样式，让注释更醒目。

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