SwiftUI Chart添加背景色后Annotation显示异常问题排查

问题原因 #

这是SwiftUI Chart的视图复用机制导致的。当给Annotation内的Text添加.background这类修饰符时，视图的标识性被削弱，Chart会错误地复用已创建的Annotation视图，而非为每个数据点生成独立实例，最终引发文本重复显示的异常。

解决办法 #

方法1：为Annotation绑定唯一标识 #

给每个PointMark附加对应数据的唯一ID，强制Chart为每个数据点创建独立的Annotation视图，彻底避免复用问题：

Chart(data) { item in
    PointMark(
        x: .value("X", item.x),
        y: .value("Y", item.y)
    )
    .annotation(position: .overlay) {
        Text(item.abbreviation)
            .background(Color.white)
    }
    .id(item.id) // 绑定数据的唯一ID字段
}

方法2：封装自定义View增强唯一性 #

把Annotation内的文本内容封装成独立自定义View，通过传入数据参数强化视图的唯一性：

struct AnnotationLabel: View {
    let abbreviation: String
    var body: some View {
        Text(abbreviation)
            .background(Color.white)
    }
}

// 在Chart中调用
Chart(data) { item in
    PointMark(
        x: .value("X", item.x),
        y: .value("Y", item.y)
    )
    .annotation(position: .overlay) {
        AnnotationLabel(abbreviation: item.abbreviation)
    }
}

方法3：用.tag替代id（无独立ID字段时） #

如果数据本身没有单独的ID字段，可以直接用数据实例作为tag，同样能阻止视图复用：

Chart(data) { item in
    PointMark(
        x: .value("X", item.x),
        y: .value("Y", item.y)
    )
    .annotation(position: .overlay) {
        Text(item.abbreviation)
            .background(Color.white)
    }
    .tag(item)
}

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