解析 JSON 数据并映射到图表

概述

在 SwiftUI 图表开发中，数据通常来自外部 API 或本地 JSON 文件。本章将详细介绍如何解析 JSON 数据并将其映射到 SwiftUI Charts 框架中，以构建动态数据驱动的图表。

JSON 数据结构设计

基本原则

扁平化结构：避免嵌套过深，便于 Swift 模型解析
明确字段命名：使用有意义的键名（如 date, value）
类型一致性：确保数据格式与图表需求匹配（如日期格式统一）

示例 JSON 结构

{
  "dataPoints": [
    {
      "timestamp": "2023-01-01T00:00:00Z",
      "temperature": 22.5,
      "humidity": 65
    },
    // 更多数据点...
  ]
}

Swift 数据模型

Codable 协议实现

struct WeatherData: Codable {
    let dataPoints: [DataPoint]
    
    struct DataPoint: Codable, Identifiable {
        let id = UUID()
        let timestamp: Date
        let temperature: Double
        let humidity: Double
        
        enum CodingKeys: String, CodingKey {
            case timestamp, temperature, humidity
        }
    }
}

日期解码策略

let decoder = JSONDecoder()
decoder.dateDecodingStrategy = .iso8601  // 处理 ISO 8601 日期格式

数据加载与解析

从本地文件加载

func loadLocalJSON() -> WeatherData? {
    guard let url = Bundle.main.url(forResource: "weather", withExtension: "json"),
          let data = try? Data(contentsOf: url) else {
        return nil
    }
    
    do {
        return try decoder.decode(WeatherData.self, from: data)
    } catch {
        print("JSON 解析错误: \(error)")
        return nil
    }
}

从 API 异步加载

@MainActor
func fetchRemoteData() async throws -> WeatherData {
    let url = URL(string: "https://api.example.com/weather")!
    let (data, _) = try await URLSession.shared.data(from: url)
    return try decoder.decode(WeatherData.self, from: data)
}

数据映射到图表

基础映射示例

Chart(weatherData.dataPoints) { point in
    LineMark(
        x: .value("日期", point.timestamp),
        y: .value("温度", point.temperature)
    )
}
.xAxis {
    AxisMarks(values: .automatic) { value in
        AxisGridLine()
        AxisTick()
        AxisValueLabel(format: .dateTime.day().month())
    }
}

多维度数据映射

Chart {
    ForEach(weatherData.dataPoints.prefix(30)) { point in
        BarMark(
            x: .value("日期", point.timestamp, unit: .day),
            y: .value("湿度", point.humidity)
        )
        .foregroundStyle(by: .value("温度区间", point.temperature > 20 ? "高温" : "低温"))
    }
}

数据转换技巧

时间序列分组

let dailyAverages = Dictionary(
    grouping: weatherData.dataPoints,
    by: { Calendar.current.startOfDay(for: $0.timestamp) }
).map { date, points in
    (date, points.map { $0.temperature }.reduce(0, +) / Double(points.count))
}

数据采样优化

extension Array where Element == WeatherData.DataPoint {
    func sampled(every n: Int) -> Self {
        stride(from: 0, to: count, by: n).map { self[$0] }
    }
}

错误处理

常见问题处理

数据缺失：使用可选值或默认值

y: .value("温度", point.temperature ?? 0)

格式错误：添加验证逻辑

guard point.temperature < 100 else { continue }

空数据状态：显示占位视图

if weatherData.dataPoints.isEmpty {
    Text("无可用数据")
} else {
    // 显示图表...
}

完整案例：天气数据图表

struct WeatherChartView: View {
    @State private var weatherData: WeatherData?
    @State private var isLoading = false
    @State private var error: Error?
    
    var body: some View {
        VStack {
            if isLoading {
                ProgressView()
            } else if let error = error {
                ErrorView(error: error)
            } else if let weatherData = weatherData {
                Chart(weatherData.dataPoints.prefix(30)) { point in
                    LineMark(
                        x: .value("日期", point.timestamp),
                        y: .value("温度", point.temperature)
                    )
                    .interpolationMethod(.catmullRom)
                    
                    PointMark(
                        x: .value("日期", point.timestamp),
                        y: .value("温度", point.temperature)
                    )
                    .annotation {
                        Text("\(point.temperature.formatted())°C")
                            .font(.caption2)
                    }
                }
                .chartYAxisLabel("温度 (°C)")
            }
        }
        .task {
            await loadData()
        }
    }
    
    private func loadData() async {
        isLoading = true
        do {
            weatherData = try await fetchRemoteData()
        } catch {
            self.error = error
            weatherData = loadLocalJSON() // 回退到本地数据
        }
        isLoading = false
    }
}

最佳实践

分离数据处理逻辑：创建专门的 DataService 类
使用中间视图模型：将原始数据转换为图表友好格式
实现数据缓存：减少网络请求
添加加载状态：提升用户体验
编写单元测试：验证数据解析逻辑

class WeatherDataService {
    private let cache = NSCache<NSString, NSData>()
    
    func fetchData() async throws -> WeatherData {
        // 实现带缓存的数据获取逻辑
    }
}

性能考虑

大数据集分页加载：避免一次性加载所有数据
后台线程解析：防止主线程阻塞
增量更新：只刷新变化的数据点
内存管理：及时释放不再使用的数据

通过以上方法，您可以高效地将 JSON 数据映射到 SwiftUI 图表，构建响应迅速、数据驱动的可视化应用。