SwiftUI Charts设置AxisValueLabel锚点为.bottom时顶部标签不显示

问题原因 #

当给AxisValueLabel设置.bottomLeading/.bottomTrailing这类底部锚点时，Y轴最顶部的标签会被推到图表可视区域外——因为锚点规则要求标签的底部对齐标记线，而标签自身有高度，向上延伸的部分会超出图表容器被裁剪。默认锚点是基于标签中心对齐标记线，所以不会出现这个问题。

解决方案 #

方案1：针对顶部标签单独调整偏移量 #

在生成Y轴标签时，判断当前值是否为最大值，给顶部标签添加向上的偏移，抵消锚点带来的位置偏差：

.chartYAxis(content: {
    AxisMarks(preset: .inset,position: .leading) { _ in
        AxisValueLabel(anchor: .bottomLeading) {
            Text("kW")
                .font(.footnote)
                .foregroundColor(.gray)
        }
    }
    
    AxisMarks(preset: .inset, position: .trailing) { value in
        AxisGridLine()
        let number = value.as(Int.self) ?? 0
        // 从数据源中获取Y轴最大值
        let maxValue = testData.max(by: { $0.value < $1.value })?.value ?? 0
        let isTopLabel = Double(number) == maxValue
        
        AxisValueLabel(anchor: .bottomTrailing) {
            Text("\(number)")
                .font(.footnote)
                .foregroundColor(.gray)
                .offset(x: 20, y: isTopLabel ? -8 : 0) // 顶部标签向上偏移补偿
        }
        AxisTick(centered: false, length: 20)
            .offset(x: 20)
    }
})

方案2：给顶部标签使用不同锚点 #

直接对顶部标签改用.topTrailing锚点，其他标签保持.bottomTrailing，让顶部标签的顶部对齐标记线，避免超出容器：

.chartYAxis(content: {
    AxisMarks(preset: .inset,position: .leading) { _ in
        AxisValueLabel(anchor: .bottomLeading) {
            Text("kW")
                .font(.footnote)
                .foregroundColor(.gray)
        }
    }
    
    AxisMarks(preset: .inset, position: .trailing) { value in
        AxisGridLine()
        let number = value.as(Int.self) ?? 0
        let maxValue = testData.max(by: { $0.value < $1.value })?.value ?? 0
        let isTopLabel = Double(number) == maxValue
        
        AxisValueLabel(anchor: isTopLabel ? .topTrailing : .bottomTrailing) {
            Text("\(number)")
                .font(.footnote)
                .foregroundColor(.gray)
                .offset(x: 20)
        }
        AxisTick(centered: false, length: 20)
            .offset(x: 20)
    }
})

额外提示 #

如果不想依赖数据源判断最大值，也可以通过value.as(Double.self)结合图表的Y轴范围逻辑判断，或者使用AxisMarks的values参数手动指定Y轴刻度，更精准控制标签的显示规则。

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