SwiftUI Bar Chart点击事件不稳定问题求助

问题背景 #

Bar Chart显示及动画均正常，但柱状条点击事件不稳定，有时有效有时无效。此前其他视图按钮遇到类似问题，用.simultaneousGesture(TapGesture().onEnded { _ in })替代按钮action参数解决，但该方案应用到Bar Chart时出现语法错误无法生效；尝试chartGesture实现后问题仍未解决，当前使用chartOverlay方案仍存在不稳定问题。

稳定点击事件的解决方案 #

方案1：直接给单个BarMark绑定点击手势 #

这是最稳定的方案，因为手势直接绑定到每个柱状条视图，无需坐标转换，避免了区域判断误差：

ForEach(variables.rigsTrippingKPIs) { item in
    BarMark(
        x: .value("Rig", item.rig),
        y: .value("Flat Time", item.animate ? item.flatTime : 0)
    )
    .annotation(position: .automatic) {
        Text("\(String(format: "%.0f", (item.flatTime * 100)))%")
            .foregroundColor(Color.white)
            .opacity(0.6)
            .font(.system(size: 8))
    }
    .foregroundStyle(.linearGradient(
        colors: [barColors1(value: item.rig, selectedCompany: variables.selectedCompany, data: item.flatTime), barColors1(value: item.rig, selectedCompany: variables.selectedCompany, data: item.flatTime)],
        startPoint: .leading,
        endPoint: .trailing)
    )
    .cornerRadius(10)
    // 新增：给每个柱状条添加点击手势
    .onTapGesture {
        variables.allowUserInteraction = false
        
        DispatchQueue.global(qos: .background).async {
            getYTDKPIs(selectedDate: variables.selectedDate, selectedRig: item.rig) { response in
                DispatchQueue.main.async {
                    variables.allowUserInteraction = true
                    if response == "Success" {
                        variables.rigsYTDTrippingKPIs = TempVariables.rigsYTDTrippingKPIs
                        variables.rigsYTDCasingKPIs = TempVariables.rigsYTDCasingKPIs
                        variables.rigsYTDCompletionKPIs = TempVariables.rigsYTDCompletionKPIs
                        
                        variables.selectedRig = item.rig
                        
                        withAnimation {
                            variables.showYTDChart = true
                        }
                    }
                }
            }
        }
    }
}

方案2：优化chartOverlay的点击区域判断 #

如果必须使用chartOverlay，修正坐标转换和区域校验逻辑，确保仅点击到柱状条范围内才触发事件：

.chartOverlay { proxy in
    GeometryReader { geometry in
        Rectangle()
            .fill(.clear)
            .contentShape(Rectangle())
            .onTapGesture { location in
                let plotArea = proxy.plotAreaFrame
                // 确保绘图区域已初始化
                guard plotArea.origin != .zero else { return }
                
                // 转换点击坐标到绘图区域内的相对坐标
                let relativeX = location.x - plotArea.origin.x
                let relativeY = location.y - plotArea.origin.y
                
                // 获取点击对应的Rig值
                guard let rig = proxy.value(atX: relativeX) as? String else { return }
                
                // 获取该Rig对应的柱状条的X范围和Y范围
                guard let xRange = proxy.positionRange(forX: rig),
                      let item = variables.rigsTrippingKPIs.first(where: { $0.rig == rig }),
                      let barTopY = proxy.position(forY: item.flatTime),
                      let barBottomY = proxy.position(forY: 0) else { return }
                
                // 计算柱状条实际可点击的X范围（排除刻度间的空白区域）
                let barWidthRatio: CGFloat = 0.8 // 柱状条占X刻度宽度的比例，可根据需求调整
                let barXStart = xRange.lowerBound + (xRange.upperBound - xRange.lowerBound) * (1 - barWidthRatio) / 2
                let barXEnd = xRange.upperBound - (xRange.upperBound - xRange.lowerBound) * (1 - barWidthRatio) / 2
                
                // 判断点击是否在柱状条的X、Y范围内
                let isInXRange = relativeX >= barXStart && relativeX <= barXEnd
                let isInYRange = relativeY >= min(barTopY, barBottomY) && relativeY <= max(barTopY, barBottomY)
                
                guard isInXRange && isInYRange else { return }
                
                // 执行后续业务逻辑
                variables.allowUserInteraction = false
                DispatchQueue.global(qos: .background).async {
                    getYTDKPIs(selectedDate: variables.selectedDate, selectedRig: rig) { response in
                        DispatchQueue.main.async {
                            variables.allowUserInteraction = true
                            if response == "Success" {
                                variables.rigsYTDTrippingKPIs = TempVariables.rigsYTDTrippingKPIs
                                variables.rigsYTDCasingKPIs = TempVariables.rigsYTDCasingKPIs
                                variables.rigsYTDCompletionKPIs = TempVariables.rigsYTDCompletionKPIs
                                
                                variables.selectedRig = rig
                                
                                withAnimation {
                                    variables.showYTDChart = true
                                }
                            }
                        }
                    }
                }
            }
    }
}

该方案的关键优化点：

• 正确转换点击坐标到图表绘图区域的相对坐标系
• 精确计算柱状条的可点击X范围，避免点击刻度间隙触发事件
• 增加Y范围校验，仅响应柱状条垂直范围内的点击

方案3：修正交互状态控制逻辑 #

当前代码通过allowsHitTesting(variables.allowUserInteraction)控制交互，需确保该状态的更新逻辑正确：

• 网络请求完成（无论成功或失败）都要将variables.allowUserInteraction设为true
• 可添加超时处理，防止网络请求异常导致交互被永久禁用

此前方案失效的原因 #

• .simultaneousGesture无法用于BarMark：BarMark是SwiftUI Charts的专用标记元素，并非标准SwiftUI视图，不支持该修饰符
• 原chartGesture实现存在坐标计算误差：比如minYaxis和maxYaxis的使用颠倒，导致Y范围判断错误，无法正确识别柱状条区域

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