iOS17 SwiftUI Chart中BarMark的TapGesture检测问题求助

方案一：直接给BarMark添加TapGesture（推荐） #

直接在每个BarMark上绑定点击手势，仅当点击到Bar区域时触发响应，完全避免和滚动手势冲突——因为滚动是Chart容器的手势，BarMark的子视图手势优先级更高。

修改你的ActivitiesChartContent，给每个Bar绑定手势和对应数据：

struct ActivitiesChartContent: View {
    @Binding var activities: [Activity]
    var onTap: (Activity) -> Void

    var body: some View {
        ForEach(activities) { activity in
            BarMark(
                xStart: .value("Start", activity.startDate),
                xEnd: .value("End", activity.endDate),
                y: .value("Activity", activity.name)
            )
            .onTapGesture {
                onTap(activity)
            }
            // 可选：添加点击视觉反馈，比如临时高亮
            .scaleEffect(/* 可绑定选中状态调整缩放比例 */)
        }
    }
}

父视图调用时移除冲突的chartXSelection：

var body: some View {
    Chart {
        ActivitiesChartContent(activities: $activities, onTap: { activity in
            self.onTap?(activity)
        })
        
        HistoryDataChartContent(quantities: $quantities)
    }
    .chartScrollableAxes(.horizontal)
}

方案二：修复chartOverlay的坐标计算 #

如果坚持用chartOverlay，需要正确匹配点击位置与图表坐标：

var body: some View {
    Chart {
        ActivitiesChartContent(activities: $activities)
        HistoryDataChartContent(quantities: $quantities)
    }
    .chartScrollableAxes(.horizontal)
    .chartOverlay { proxy in
        GeometryReader { geo in
            Color.clear
                .contentShape(Rectangle())
                .onTapGesture { location in
                    // 计算点击位置相对于图表绘制区域的偏移量
                    let plotArea = geo[proxy.plotAreaFrame]
                    let relativeX = location.x - plotArea.origin.x
                    
                    // 将偏移量转换为图表对应的Date值
                    guard let date = proxy.value(atX: relativeX) as Date? else { return }
                    
                    if let activity = activities.first(where: { ($0.startDate...$0.endDate).contains(date) }) {
                        onTap?(activity)
                    }
                }
        }
    }
}

核心是通过proxy.plotAreaFrame获取图表实际绘制区域的位置，修正点击坐标后再转换为对应的数据值，解决之前位置检测不准确的问题。

原方案失效原因 #

• 重写chartGesture：自定义手势会破坏Chart原生的滚动交互逻辑，且手动坐标转换复杂度高，容易出错。
• 错误使用chartOverlay：未正确计算绘制区域的偏移量，导致点击位置与图表坐标不匹配，无法准确触发目标数据。

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