SwiftUI绘制折线图遇报错求助：附代码及错误信息

问题背景 #

需要实现SwiftUI折线图，需求：

• 数据源：x: [1,2,3,4,5], y: [1,2,3,4,5]，X轴标签Salary，Y轴标签exper
• 折线为蓝色，每个数据点为红色并显示标注
• 当前代码报类型不匹配、找不到Charts模块成员等错误

报错原因 #

核心问题是混淆了两个不同的Charts框架：

• 代码中使用的是第三方Charts库（原MPAndroidChart的iOS移植版）的API，但导入的是Apple官方的Charts框架（iOS 16+推出的SwiftUI原生图表框架），两者API完全不兼容，导致所有类型和成员找不到。
• 同时LineChartRepresentable未完全实现UIViewRepresentable协议（缺少Coordinator相关实现）。

解决步骤 #

1. 替换依赖框架 #

移除Apple官方Charts的导入，改用第三方Charts库：

• 通过Swift Package Manager添加：仓库地址https://github.com/danielgindi/Charts.git
• 或通过CocoaPods添加：在Podfile中加入pod 'Charts'，执行pod install

2. 修正代码实现 #

以下是满足需求的完整代码：

LineChartView.swift

import SwiftUI
import Charts

struct LineChartRepresentable: UIViewRepresentable {
    let xValues: [Double]
    let yValues: [Double]
    let xLabel: String
    let yLabel: String
    
    // 实现UIViewRepresentable要求的Coordinator（空实现即可，无交互需求时）
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator: NSObject {}
    
    func makeUIView(context: Context) -> LineChartView {
        let chartView = LineChartView()
        // 设置坐标轴标签
        chartView.xAxis.labelTextColor = .black
        chartView.xAxis.labelPosition = .bottom
        chartView.xAxis.titleText = xLabel
        
        chartView.leftAxis.labelTextColor = .black
        chartView.leftAxis.titleText = yLabel
        chartView.rightAxis.enabled = false // 隐藏右侧Y轴
        
        chartView.legend.enabled = false // 隐藏图例，按需调整
        return chartView
    }
    
    func updateUIView(_ uiView: LineChartView, context: Context) {
        // 生成数据条目
        let entries = zip(xValues, yValues).map { ChartDataEntry(x: $0, y: $1) }
        
        // 配置数据集：折线蓝色，数据点红色
        let dataSet = LineChartDataSet(entries: entries, label: "")
        dataSet.colors = [.blue]
        dataSet.circleColors = [.red]
        dataSet.circleRadius = 4
        // 显示数据点标注
        dataSet.drawValuesEnabled = true
        dataSet.valueTextColor = .black
        
        let data = LineChartData(dataSet: dataSet)
        uiView.data = data
        uiView.notifyDataSetChanged()
    }
}

ContentView.swift

import SwiftUI

struct ContentView: View {
    // 匹配需求的数据源
    let xValues: [Double] = [1,2,3,4,5]
    let yValues: [Double] = [1,2,3,4,5]
    
    var body: some View {
        VStack(spacing: 20) {
            Text("Salary vs Experience")
                .font(.title)
            LineChartRepresentable(
                xValues: xValues,
                yValues: yValues,
                xLabel: "Salary",
                yLabel: "exper"
            )
            .frame(height: 300)
            .padding()
        }
    }
}

关键修正点 #

• 移除所有Charts.前缀，第三方库的类型直接使用（如LineChartView而非Charts.LineChartView）
• 补充UIViewRepresentable要求的makeCoordinator()方法
• 配置坐标轴标签匹配需求，设置数据点为红色并开启标注显示
• 替换为需求指定的数据源

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