第二部分：使用 SwiftUI Charts 框架

第 7 章：交互式图表

图表与表单控件的联动

在数据可视化应用中，图表与表单控件的联动是提升用户体验的关键功能。通过将图表与选择器（Picker）、滑块（Slider）、开关（Toggle）等控件结合，用户可以动态筛选或调整数据，实现实时交互效果。

核心实现步骤

  1. 数据绑定机制
    使用 @State 或 @Binding 将表单控件的值绑定到图表数据：

    @State private var selectedCategory: String = "All"
@State private var dateRange: ClosedRange<Date> = Date()...Date()

  2. 动态数据过滤
    根据控件输入值实时计算图表数据：

    var filteredData: [DataPoint] {
    rawData.filter { item in
        (selectedCategory == "All" || item.category == selectedCategory) &&
        dateRange.contains(item.date)
    }
}

  3. 控件与图表组合
    在视图中将控件与 Chart 视图垂直堆叠：

    VStack {
    Picker("Category", selection: $selectedCategory) {
        ForEach(["All", "A", "B", "C"], id: \.self) { Text($0) }
    }
    .pickerStyle(.segmented)
    
    DatePicker("Range", selection: $dateRange, displayedComponents: .date)
    
    Chart(filteredData) { item in
        BarMark(x: .value("Day", item.date), y: .value("Value", item.value))
    }
}

高级联动技巧

  • 双向绑定
    通过手势交互修改图表数据后，同步更新表单控件值：

    .chartOverlay { proxy in
    GeometryReader { geo in
        Rectangle().fill(.clear).contentShape(Rectangle())
            .gesture(
                DragGesture()
                    .onChanged { value in
                        let xPos = value.location.x
                        // 转换坐标到数据值
                        if let date: Date = proxy.value(atX: xPos) {
                            selectedDate = date
                        }
                    }
            )
    }
}

  • 动画过渡
    为数据变化添加平滑动画：

    Chart(filteredData) { item in
    LineMark(...)
}
.animation(.default.speed(0.5), value: filteredData)

实际案例：销售数据仪表盘

struct SalesDashboard: View {
    @State private var regionFilter: Region = .all
    @State private var showTrendLine: Bool = true
    
    var body: some View {
        VStack(spacing: 20) {
            // 表单控件区域
            HStack {
                Picker("Region", selection: $regionFilter) {
                    ForEach(Region.allCases) { Text($0.rawValue) }
                }
                Toggle("Trend Line", isOn: $showTrendLine)
            }
            .padding(.horizontal)
            
            // 动态图表
            Chart {
                ForEach(filteredSales) { sale in
                    BarMark(x: .value("Month", sale.month), 
                           y: .value("Revenue", sale.amount))
                    
                    if showTrendLine {
                        LineMark(x: .value("Month", sale.month),
                                y: .value("Trend", sale.trendValue))
                            .foregroundStyle(.red)
                    }
                }
            }
            .frame(height: 300)
        }
    }
}

最佳实践

  1. 保持响应速度
    对大数据集使用 LazyVStack 或分页加载
  2. 视觉反馈
    在数据加载时显示进度指示器
  3. 默认值优化
    设置合理的控件初始值避免空数据状态

通过这种联动模式，可以构建出类似 Apple Stocks 或 Health 应用的交互式数据探索体验。

Last Updated::