如何用SwiftUI Charts绘制函数并实现跨视图数据联动更新？

1. 定义数据模型 #

先创建一个遵循Identifiable协议的结构体，用来存储每个(x, y)坐标点，让Chart可以直接识别并渲染：

struct DataPoint: Identifiable {
    let id = UUID()
    let x: Double
    let y: Double
}

2. 实现可响应的Chart视图 #

创建FunctionChartView，通过@Binding接收滑块传来的参数，参数变化时会自动触发图表刷新。用计算属性实时生成数据点：

import SwiftUI
import Charts

struct FunctionChartView: View {
    @Binding var startingPrice: Double
    @Binding var manufacturingPrice: Double
    @Binding var profitMargin: Double
    
    // 实时计算函数数据点
    private var dataPoints: [DataPoint] {
        (1...1000).map { x in
            let xDouble = Double(x)
            let y = ((startingPrice + manufacturingPrice * xDouble) * profitMargin) / xDouble
            return DataPoint(x: xDouble, y: y)
        }
    }
    
    var body: some View {
        Chart(dataPoints) { point in
            LineMark(
                x: .value("数量", point.x),
                y: .value("单价", point.y)
            )
            .interpolationMethod(.catmullRom) // 可选：让线条更平滑
        }
        .chartXAxisLabel("产品数量")
        .chartYAxisLabel("单位售价")
        .padding()
    }
}

3. 实现带滑块的控制视图 #

创建SliderControlView，用@State管理参数，通过绑定传递给Chart视图：

struct SliderControlView: View {
    @State private var startingPrice: Double = 4000
    @State private var manufacturingPrice: Double = 120
    @State private var profitMargin: Double = 1.6
    
    var body: some View {
        VStack(spacing: 20) {
            FunctionChartView(
                startingPrice: $startingPrice,
                manufacturingPrice: $manufacturingPrice,
                profitMargin: $profitMargin
            )
            .frame(height: 300)
            
            // 启动成本滑块
            VStack(alignment: .leading) {
                Text("启动成本: \(startingPrice, specifier: "%.0f")")
                Slider(value: $startingPrice, in: 1000...10000, step: 100)
            }
            
            // 单位制造成本滑块
            VStack(alignment: .leading) {
                Text("单位制造成本: \(manufacturingPrice, specifier: "%.1f")")
                Slider(value: $manufacturingPrice, in: 50...200, step: 5)
            }
            
            // 利润率滑块
            VStack(alignment: .leading) {
                Text("利润率: \(profitMargin, specifier: "%.1f")")
                Slider(value: $profitMargin, in: 1.1...3.0, step: 0.1)
            }
        }
        .padding()
    }
}

4. 主视图调用 #

在ContentView里直接使用SliderControlView即可：

struct ContentView: View {
    var body: some View {
        SliderControlView()
    }
}

关键说明 #

• 使用@Binding实现参数双向绑定：滑块修改参数时，FunctionChartView的计算属性会自动重新生成数据点，触发图表刷新。
• 数据点生成用(1...1000).map遍历范围，转换为Double后计算y值，简洁高效。
• interpolationMethod(.catmullRom)可让线条更平滑，去掉则为折线效果，按需选择。

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