SwiftUI @Charts 数据更新时如何实现图表自动刷新？

核心问题是你的数据更新没有正确触发视图刷新，用@ObservedObject（或iOS14+的@StateObject）配合@Published修饰的数据源，就能让图表随数据变化自动刷新。

1. 封装数据管理的视图模型 #

创建一个遵循ObservableObject的类，把数据数组、定时任务和API请求逻辑都放在这里，用@Published标记需要触发视图更新的属性：

import Combine
import SwiftUI

class ChartDataViewModel: ObservableObject {
    // 用@Published修饰，数组变化时自动通知视图刷新
    @Published var chartData: [Double] = []
    private var cancellables = Set<AnyCancellable>()
    
    init() {
        // 初始化时启动定时任务，比如每5秒获取一次数据
        startDataFetchTimer()
    }
    
    private func startDataFetchTimer() {
        Timer.publish(every: 5, on: .main, in: .common)
            .autoconnect()
            .sink { [weak self] _ in
                self?.fetchDataFromAPI()
            }
            .store(in: &cancellables)
    }
    
    private func fetchDataFromAPI() {
        // 替换成你的实际API调用逻辑
        URLSession.shared.dataTask(with: URL(string: "https://your-api-url.com/data")!) { data, _, error in
            guard let data = data, error == nil else { return }
            
            do {
                // 替换成你的数据模型解析逻辑
                let newData = try JSONDecoder().decode([Double].self, from: data)
                // 回到主队列更新数据，确保UI刷新在主线程
                DispatchQueue.main.async {
                    self.chartData = newData
                    print("更新后的数据：\(self.chartData)")
                }
            } catch {
                print("解析错误：\(error)")
            }
        }.resume()
    }
}

2. 在视图中使用视图模型 #

在你的图表视图中，用@StateObject（iOS14+推荐）或@ObservedObject持有视图模型，直接绑定chartData到图表组件：

import SwiftUI
// 替换成你实际使用的图表库，这里以SwiftUI Charts为例
import Charts

struct ChartView: View {
    // iOS14+用@StateObject，iOS13用@ObservedObject（需在父视图传递实例）
    @StateObject private var viewModel = ChartDataViewModel()
    
    var body: some View {
        VStack {
            Text("实时更新图表")
                .font(.title)
            
            // 替换成你的图表实现逻辑
            LineChart {
                ForEach(Array(viewModel.chartData.enumerated()), id: \.offset) { index, value in
                    LineMark(
                        x: .value("索引", index),
                        y: .value("数值", value)
                    )
                }
            }
            .padding()
        }
    }
}

关键细节 #

• @Published：修饰的属性发生变化时，会自动向订阅的视图发送更新通知，触发视图重绘。
• ObservableObject：视图模型遵循该协议，让视图可以观察其状态变化。
• @StateObject：负责管理视图模型的生命周期，避免重复初始化（iOS14+专属，iOS13需用@ObservedObject并在父视图传递实例）。
• 主线程更新：API请求在后台线程执行，必须回到主队列更新chartData，否则UI不会响应刷新。

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