SwiftUI Charts中BarMark的annotation点击手势无响应如何解决？

核心原因 #

BarMark的annotation修饰符生成的标注视图，默认被框架自动添加了allowsHitTesting(false)属性，内部所有视图的手势、按钮交互都会被系统拦截，这也是你写的onTapGesture、Button始终无法触发的根本原因，和你x轴用字符串类型、多系列柱状图的场景没有关系。

方案1：最小改动适配现有代码 #

直接在annotation的根视图上显式声明.allowsHitTesting(true)，覆盖框架的默认交互禁用配置即可，不需要修改你现有的数据结构和多系列布局逻辑。
核心修改代码：

var body: some View {
    List {
        Chart {
            ForEach(data) {
                BarMark(
                    x: .value("Mount", $0.mount),
                    y: .value("Value", $0.value)
                )
                .foregroundStyle(by: .value("Type", "Series \($0.type)"))
                .position(by: .value("Type", $0.type))
                .annotation {
                    HStack {
                        Rectangle()
                            .fill(Color.red.opacity(0.2))
                            .frame(width: 20, height: 20)
                            .clipShape(Circle())
                            .onTapGesture {
                                print("Tapped! 当前点击对应数据：月份\($0.mount)，系列\($0.type)")
                            }
                    }
                    .allowsHitTesting(true) // 关键配置：开启标注视图的交互响应
                }
            }
        }
        .frame(height: 250)
        .labelsHidden()
        // 如果List默认行点击手势抢占了标注的点击事件，加下面这行即可
        .buttonStyle(.plain)
    }
}

如果加了上述配置还是偶现点击不触发，给外层List的单元格添加一个空的onTapGesture{}实现，屏蔽List默认的行选手势优先级即可。

方案2：使用Chart内置手势识别（适配复杂交互场景） #

如果需要实现点击标注联动柱子高亮、弹出详情浮层这类复杂交互，可以不用依赖annotation内部的手势，直接用Charts提供的chartGesture修饰符，通过位置反查对应数据项即可，该方案完全不限制x轴的数据类型，字符串、日期、数值类型都能正常适配，多系列场景也能精准定位。
示例代码：

// 先定义选中项状态
@State private var selectedBarData: YourDataModel?

var body: some View {
    List {
        Chart {
            ForEach(data) { item in
                BarMark(
                    x: .value("Mount", item.mount),
                    y: .value("Value", item.value)
                )
                .foregroundStyle(by: .value("Type", "Series \(item.type)"))
                .position(by: .value("Type", item.type))
                .annotation {
                    // 你的标注视图，这里不需要再加任何手势代码
                    Circle()
                        .fill(Color.red.opacity(0.2))
                        .frame(width: 20, height: 20)
                }
            }
        }
        .frame(height: 250)
        .labelsHidden()
        .chartGesture { proxy in
            // 用minimumDistance为0的拖拽手势模拟点击
            DragGesture(minimumDistance: 0)
                .onEnded { location in
                    // 反查点击位置对应的x轴字符串值
                    guard let currentMount: String = proxy.value(atX: location.location.x, as: String.self),
                          // 反查点击位置对应的y轴数值
                          let currentValue: Double = proxy.value(atY: location.location.y, as: Double.self) else {
                        selectedBarData = nil
                        return
                    }
                    // 多系列场景下匹配对应的数据项，可根据你的精度要求调整阈值
                    selectedBarData = data.first {
                        $0.mount == currentMount && abs($0.value - currentValue) < 0.5
                    }
                    if let selected = selectedBarData {
                        print("选中项：\(selected)")
                    }
                }
        }
    }
}

问题运行效果参考：

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