SwiftUI中Swift Charts柱状图与X轴标签点击无响应问题求助

问题描述 #

我使用Swift Charts框架绘制了柱状图，需要实现两个点击操作：

• 点击绿色柱状图时触发对应操作
• 点击X轴上带有标签文本的红色高亮矩形区域时触发对应操作

目前X轴区域的点击没有效果，相关代码如下：

import SwiftUI
import Charts

struct Item: Identifiable {
    let id = UUID()
    let month: String
    let revenue: Double
    let visits: Double
}

struct TapChart: View {

    let items: [Item] = [
        Item(month: "Jan", revenue: 100, visits: 2),
        Item(month: "Feb", revenue: 200, visits: 1),
        Item(month: "Mar", revenue: 150, visits: 4),
        Item(month: "Apr", revenue: 130, visits: 0),
        Item(month: "May", revenue: 300, visits: 3),
        Item(month: "Jun", revenue: 50, visits: 2)
    ]

    var myItems = [Item]()

    var body: some View {
        Chart {
            ForEach(items) { items in
                BarMark(
                    x: .value("Month", items.month),
                    y: .value("Revenue", items.revenue)
                )
                .foregroundStyle(Color.green.gradient)
            }
        }
        .chartForegroundStyleScale([
            "SEO Revenue" : Color(.green),
            "Visits": Color(.purple)
        ])
        .chartLegend(position: .top, alignment: .bottomTrailing)
        .chartXAxis {
            AxisMarks { axis in
                AxisValueLabel(centered: true) {
                    Text("\(items[axis.index].month)")
                        .font(.system(size: 12, weight: .bold))
                        .padding(.horizontal, 12)
                        .padding(.vertical, 8)
                        .background(Color.red.opacity(0.3))
                        .cornerRadius(4)
                        .onTapGesture {
                            print("\(items[axis.index].month)")
                        }
                }
            }
        }
        .chartYAxis(.visible)
        .padding()
        .cornerRadius(15)
        .frame(height: 300)
    }
}

问题原因 #

X轴标签上的onTapGesture无法触发，是因为Chart容器的手势优先级高于AxisValueLabel内部的手势，导致点击事件被Chart拦截。

解决方法 #

通过chartOverlay统一处理所有点击事件，既能实现柱状图点击，也能解决X轴标签点击无响应的问题。

完整代码示例 #

import SwiftUI
import Charts

struct Item: Identifiable {
    let id = UUID()
    let month: String
    let revenue: Double
    let visits: Double
}

struct TapChart: View {
    let items: [Item] = [
        Item(month: "Jan", revenue: 100, visits: 2),
        Item(month: "Feb", revenue: 200, visits: 1),
        Item(month: "Mar", revenue: 150, visits: 4),
        Item(month: "Apr", revenue: 130, visits: 0),
        Item(month: "May", revenue: 300, visits: 3),
        Item(month: "Jun", revenue: 50, visits: 2)
    ]
    
    var body: some View {
        Chart {
            ForEach(items) { item in
                BarMark(
                    x: .value("Month", item.month),
                    y: .value("Revenue", item.revenue)
                )
                .foregroundStyle(Color.green.gradient)
                // 附加隐藏标注，用于快速获取点击的柱状图对应数据
                .annotation(position: .hidden) {
                    Text(item.month)
                }
            }
        }
        .chartForegroundStyleScale([
            "SEO Revenue" : Color(.green),
            "Visits": Color(.purple)
        ])
        .chartLegend(position: .top, alignment: .bottomTrailing)
        .chartXAxis {
            AxisMarks { axis in
                AxisValueLabel(centered: true) {
                    Text(items[axis.index].month)
                        .font(.system(size: 12, weight: .bold))
                        .padding(.horizontal, 12)
                        .padding(.vertical, 8)
                        .background(Color.red.opacity(0.3))
                        .cornerRadius(4)
                }
            }
        }
        .chartYAxis(.visible)
        .padding()
        .cornerRadius(15)
        .frame(height: 300)
        // 添加Overlay统一处理点击事件
        .chartOverlay { proxy in
            GeometryReader { geometry in
                Rectangle()
                    .fill(.clear)
                    .contentShape(Rectangle())
                    .onTapGesture { location in
                        let chartLocation = proxy.convert(location, from: .chart)
                        
                        // 检测是否点击到柱状图
                        if let mark = proxy.hitTest(location).first {
                            if let monthText = (mark.annotations.first?.view as? Text)?.text {
                                print("点击柱状图：\(monthText)")
                                // 此处添加柱状图点击后的业务逻辑
                            }
                        } else {
                            // 检测是否点击到X轴标签区域
                            let yRange = proxy.positionYRange ?? 0...0
                            // 判断点击位置是否靠近X轴底部
                            if chartLocation.y > yRange.upperBound - 50 {
                                if let month = proxy.value(atX: chartLocation.x) as? String,
                                   let targetItem = items.first(where: { $0.month == month }) {
                                    print("点击X轴标签：\(targetItem.month)")
                                    // 此处添加X轴标签点击后的业务逻辑
                                }
                            }
                        }
                    }
            }
        }
    }
}

代码说明 #

1. 柱状图点击处理：通过proxy.hitTest(location)获取点击到的BarMark，再从附加的隐藏annotation中提取对应月份数据，触发操作。
2. X轴标签点击处理：判断点击位置是否处于X轴区域（靠近Chart底部），通过proxy.value(atX:)将坐标转换为对应月份字符串，匹配数据后触发操作。

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