SwiftUI Charts中如何将BarMark的annotation对齐到图表顶部？

问题原因 #

你之前使用annotation时，标注的坐标系默认绑定到单个BarMark的区域，所以添加Spacer或者frame(maxHeight: .infinity)只会在柱子范围内拉伸，无法突破到图表顶部区域，导致文字始终贴在柱子顶端。

可行解决方案 #

方案1：用chartOverlay精准定位（推荐）

利用chartOverlay在整个图表的坐标系中添加标注，能直接对齐到图表顶部：

Chart(items) { item in
    BarMark(
        x: .value("分类", item.category),
        y: .value("价格", item.price)
    )
}
.chartOverlay { proxy in
    GeometryReader { geometry in
        ForEach(items) { item in
            // 获取当前分类对应的x轴位置
            guard let xPos = proxy.position(forX: item.category) else { return }
            // 获取图表绘图区域的顶部y坐标
            let topYPos = geometry[proxy.plotAreaFrame].minY
            
            Text("\(Int(item.price))")
                .font(.system(size: 8))
                .rotationEffect(.degrees(270))
                .position(
                    x: xPos,
                    y: topYPos - 10 // 调整偏移量避免紧贴顶部边框
                )
        }
    }
}

方案2：调整annotation的坐标空间

如果坚持用annotation，可以通过自定义坐标系让标注突破柱子范围：

Chart(items) { item in
    BarMark(
        x: .value("分类", item.category),
        y: .value("价格", item.price)
    )
    .annotation(position: .overlay, alignment: .top) {
        GeometryReader { geo in
            // 拿到整个图表的坐标空间
            let chartFrame = geo.frame(in: .named("chartCoordinate"))
            Text("\(Int(item.price))")
                .font(.system(size: 8))
                .rotationEffect(.degrees(270))
                .position(y: chartFrame.minY)
        }
        .frame(maxHeight: .infinity)
    }
}
.coordinateSpace(name: "chartCoordinate")

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