在iOS应用中从API检索数据并显示为图表是一个常见的开发场景,主要涉及以下几个核心概念:
import SwiftUI
import Charts
struct SalesData: Codable, Identifiable {
let id = UUID()
let month: String
let revenue: Double
}
struct ContentView: View {
@State private var salesData: [SalesData] = []
var body: some View {
Chart(salesData) { data in
BarMark(
x: .value("Month", data.month),
y: .value("Revenue", data.revenue)
)
}
.task {
await fetchData()
}
}
func fetchData() async {
guard let url = URL(string: "https://api.example.com/sales") else { return }
do {
let (data, _) = try await URLSession.shared.data(from: url)
let decodedData = try JSONDecoder().decode([SalesData].self, from: data)
salesData = decodedData
} catch {
print("Error fetching data: \(error)")
}
}
}
import UIKit
import Charts
class ViewController: UIViewController {
@IBOutlet weak var barChartView: BarChartView!
override func viewDidLoad() {
super.viewDidLoad()
fetchChartData()
}
func fetchChartData() {
guard let url = URL(string: "https://api.example.com/data") else { return }
URLSession.shared.dataTask(with: url) { data, response, error in
if let data = data {
do {
let json = try JSONSerialization.jsonObject(with: data) as? [[String: Any]]
let entries = json?.compactMap { item -> BarChartDataEntry? in
guard let x = item["x"] as? Double,
let y = item["y"] as? Double else { return nil }
return BarChartDataEntry(x: x, y: y)
}
DispatchQueue.main.async {
let dataSet = BarChartDataSet(entries: entries, label: "Data")
dataSet.colors = [.systemBlue]
self.barChartView.data = BarChartData(dataSet: dataSet)
}
} catch {
print("JSON error: \(error.localizedDescription)")
}
}
}.resume()
}
}
原因:
解决方案:
// 确保在主线程更新
DispatchQueue.main.async {
self.updateChart(with: data)
}
原因:
解决方案:
// 在Charts库中设置性能优化
chartView.dragEnabled = true
chartView.setScaleEnabled(true)
chartView.pinchZoomEnabled = true
chartView.maxVisibleCount = 100 // 限制可见数据点
解决方案:
struct APIResponse: Codable {
let dataPoints: [DataPoint]
struct DataPoint: Codable {
let timestamp: String
let value: Double
}
}
// 解析时
let decoder = JSONDecoder()
decoder.dateDecodingStrategy = .iso8601
let response = try decoder.decode(APIResponse.self, from: data)
通过合理选择图表类型和优化数据加载流程,可以创建高效、美观的数据可视化iOS应用。
没有搜到相关的沙龙