第二部分：使用 SwiftUI Charts 框架

第 7 章：交互式图表

添加手势支持（点击、拖拽、缩放）

在数据可视化中，交互性是提升用户体验的关键因素。SwiftUI 提供了丰富的手势识别功能，可以轻松为图表添加点击、拖拽和缩放等交互行为。本节将详细介绍如何为 SwiftUI 图表实现这些手势支持。

1. 点击手势（TapGesture）

点击手势是最基础的交互方式，常用于高亮数据点或显示详细信息。以下是一个为 PointMark 添加点击响应的示例：

struct InteractiveScatterPlot: View {
    @State private var selectedIndex: Int? = nil
    
    var body: some View {
        Chart(data) { item in
            PointMark(
                x: .value("Date", item.date),
                y: .value("Value", item.value)
            )
            .foregroundStyle(selectedIndex == item.id ? .red : .blue)
        }
        .chartOverlay { proxy in
            GeometryReader { geometry in
                Rectangle().fill(.clear).contentShape(Rectangle())
                    .onTapGesture { location in
                        if let index = proxy.value(at: location, as: Int.self) {
                            selectedIndex = index
                        }
                    }
            }
        }
    }
}

2. 拖拽手势（DragGesture）

拖拽手势常用于平移图表或选择数据范围。以下是实现图表横向拖拽的代码：

struct DraggableLineChart: View {
    @State private var dragOffset: CGFloat = 0
    
    var body: some View {
        Chart(data) { item in
            LineMark(
                x: .value("Date", item.date),
                y: .value("Value", item.value)
            )
        }
        .offset(x: dragOffset)
        .gesture(
            DragGesture()
                .onChanged { value in
                    dragOffset = value.translation.width
                }
                .onEnded { value in
                    // 实现惯性滑动或边界检查
                }
        )
    }
}

3. 缩放手势（MagnificationGesture）

缩放手势允许用户放大查看细节或缩小查看整体趋势：

struct ZoomableBarChart: View {
    @State private var scale: CGFloat = 1.0
    @State private var lastScale: CGFloat = 1.0
    
    var body: some View {
        Chart(data) { item in
            BarMark(
                x: .value("Category", item.category),
                y: .value("Value", item.value)
            )
        }
        .scaleEffect(scale)
        .gesture(
            MagnificationGesture()
                .onChanged { value in
                    let delta = value / lastScale
                    lastScale = value
                    scale *= delta
                }
                .onEnded { _ in
                    lastScale = 1.0
                    // 添加缩放限制逻辑
                }
        )
    }
}

4. 组合手势

可以组合多种手势实现更复杂的交互：

.gesture(
    SimultaneousGesture(
        DragGesture()
            .onChanged { /* 拖拽逻辑 */ },
        MagnificationGesture()
            .onChanged { /* 缩放逻辑 */ }
    )
)

5. 性能优化建议

  • 对于大数据集，考虑使用 Canvas 代替标准视图
  • 使用 @GestureState 代替 @State 以获得更流畅的交互
  • 实现手势冲突解决逻辑（如双击重置缩放）

6. 完整示例：可交互的股票图表

struct InteractiveStockChart: View {
    @State private var selectedDate: Date?
    @State private var zoomLevel: CGFloat = 1.0
    @State private var panOffset: CGSize = .zero
    
    var body: some View {
        Chart(stockData) { item in
            LineMark(
                x: .value("Day", item.date),
                y: .value("Price", item.price)
            )
            
            if let selectedDate, selectedDate == item.date {
                PointMark(
                    x: .value("Day", item.date),
                    y: .value("Price", item.price)
                )
                .annotation(position: .top) {
                    Text("\(item.price.formatted(.currency(code: "USD")))")
                }
            }
        }
        .chartXScale(domain: visibleDateRange)
        .chartGesture(
            DragGesture(minimumDistance: 5)
                .onChanged { value in
                    // 处理平移
                }
                .onEnded { _ in /* 惯性逻辑 */ },
            MagnifyGesture()
                .onChanged { value in
                    // 处理缩放
                }
        )
    }
    
    private var visibleDateRange: ClosedRange<Date> {
        // 根据 zoomLevel 和 panOffset 计算可见范围
    }
}

通过合理组合这些手势，你可以创建出既美观又功能强大的交互式图表，显著提升用户的数据探索体验。

Last Updated::