SwiftUI Charts添加带背景的overlay注解后图表消失问题

问题说明 #

在SwiftUI Charts中，给图表点添加带背景、边框的数值注解时，若将注解的position设为.overlay，只要给Text加上.background修饰符，整个图表就会消失。仅用纯Text作为注解内容时，图表显示正常。

问题代码片段 #

.annotation(position: .overlay, alignment: .center) {
    Text("\(hour.value)°")
        .background(.yellow)
}

完整复现代码 #

struct ContentView: View {
    
    struct Value: Identifiable {
        var id = UUID()
        var time: Date
        var value: Int
        
        var timeStr : String {
            "\(time)"
        }
    }
    
    let data = [
        Value(time: Date().startOfHour().adding(hours: 0), value: 7),
        Value(time: Date().startOfHour().adding(hours: 1), value: 9),
        Value(time: Date().startOfHour().adding(hours: 2), value: 12),
        Value(time: Date().startOfHour().adding(hours: 3), value: 16),
        Value(time: Date().startOfHour().adding(hours: 4), value: 6),
    ]
    
    var body: some View {
        
        Chart (data) { hour in
            LineMark(x: .value("Day", hour.time), y: .value("Value", hour.value))
                .interpolationMethod(.catmullRom)
            PointMark(x: .value("Day", hour.time), y: .value("Value", hour.value))
                // 将.position改为.overlay后图表消失
                .annotation(position: .top, alignment: .center) {
                    Text("\(hour.value)°")
                    // 注释掉这些文本修饰符，图表会重新显示
                        .font(.caption2)
                        .padding(.horizontal, 3)
                        .background(
                            RoundedRectangle(cornerRadius: 4).fill(Color.blue.opacity(0.2))
                           )
                        .overlay(
                                RoundedRectangle(cornerRadius: 4)
                                    .stroke(.blue, lineWidth: 1)
                            )
                    // 修饰符结束
                }
        }
        .padding()
        .frame(height: 200)
    }
}

extension Date {
    func startOfHour() -> Date {
        let calendar = Calendar.current
        
        var components = calendar.dateComponents([.year, .month, .day, .hour, .minute, .second], from: self)
        
        components.minute = 0
        components.second = 0
        
        return calendar.date(from: components)!
    }
    
    func adding(hours: Int) -> Date {
        Calendar.current.date(byAdding: .hour, value: hours, to: self)!
    }
}

解决方法 #

这是SwiftUI Charts的内部布局bug，当.overlay注解包含带背景的视图时，会触发布局循环或尺寸计算异常，导致图表无法渲染。以下是三种可行的解决方式：

方法1：给注解视图添加固定尺寸限制 #

给带背景的Text明确指定宽高，避免布局计算出错：

.annotation(position: .overlay, alignment: .center) {
    Text("\(hour.value)°")
        .font(.caption2)
        .padding(.horizontal, 3)
        .background(RoundedRectangle(cornerRadius: 4).fill(Color.blue.opacity(0.2)))
        .overlay(RoundedRectangle(cornerRadius: 4).stroke(.blue, lineWidth: 1))
        .frame(width: 30, height: 20) // 添加固定尺寸约束
}

方法2：改用非.overlay的注解位置 #

如果不需要注解覆盖在图表图层上，将position改为.top或.bottom，添加背景修饰符也不会影响图表显示：

.annotation(position: .top, alignment: .center) {
    Text("\(hour.value)°")
        .font(.caption2)
        .padding(.horizontal, 3)
        .background(RoundedRectangle(cornerRadius: 4).fill(Color.blue.opacity(0.2)))
        .overlay(RoundedRectangle(cornerRadius: 4).stroke(.blue, lineWidth: 1))
}

方法3：用ZStack手动叠加注解 #

绕过annotation修饰符，直接用ZStack控制图表和注解的层级，完全自定义布局：

ZStack {
    Chart(data) { hour in
        LineMark(x: .value("Day", hour.time), y: .value("Value", hour.value))
            .interpolationMethod(.catmullRom)
        PointMark(x: .value("Day", hour.time), y: .value("Value", hour.value))
    }
    .padding()
    .frame(height: 200)
    
    ForEach(data) { hour in
        Text("\(hour.value)°")
            .font(.caption2)
            .padding(.horizontal, 3)
            .background(RoundedRectangle(cornerRadius: 4).fill(Color.blue.opacity(0.2)))
            .overlay(RoundedRectangle(cornerRadius: 4).stroke(.blue, lineWidth: 1))
            .position(
                x: // 根据hour.time计算对应x坐标
                y: // 根据hour.value计算对应y坐标
            )
    }
}

提示：手动计算坐标需结合图表尺寸和数据范围，可通过GeometryReader获取图表实际布局信息来实现精确定位。

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