如何使用 SwiftUI 中的图表沿 X 轴显示日期？

Question

我在 SwiftUI 中使用图表框架时遇到一些问题。一切都按预期绘制，但 x 轴不显示每个点的日期。 Y 轴正在工作并显示沿 Y 轴的重量值。 dateCompleted 的类型为 Date()。

             Chart(exerciseMaxRepsArray) { e in
                                    LineMark(x: .value("Date", e.dateCompleted),                                         
                                             y: .value("Reps", e.reps)                                             
                                    )}

我尝试使用 dateFormatter 并将其绘制为字符串，我尝试指定

LineMark(x: .value("Date", e.dateCompleted, unit: .day),                                         
         y: .value("Reps", e.reps))}                                                                            

但是没有任何方法可以显示日期值。我已确保日期已填充并且框架足够大，因此它们不会被剪切掉。任何帮助将不胜感激。谢谢！！！

这就是模拟器中图表的样子：模拟器屏幕

编辑：

GroupBox(label: Text("Daily Max Reps"){
 Chart(exerciseMaxRepsArray) { e in
    LineMark(x: .value("Date", e.dateCompleted, unit: .day),
 y: .value("Reps", e.reps)
 ) } 
.chartYAxisLabel(position: .trailing, alignment: .center) {
   Text("Reps")
 }
.chartXAxisLabel(position: .bottom, alignment: .center) {
 Text("Date")
}
.padding()
 } .groupBoxStyle(BackgroundGroupBoxStyle()) 

编辑：

//
//  ExerciseDetailView.swift
//  WorkoutTrackerTrial
//
//  Created by Rachel Scott on 12/7/22.
//

import SwiftUI
import Charts


struct ExerciseDetailView: View {
    
    @FetchRequest var exercisesets: FetchedResults<ExerciseSet>
    
    var exercise: String

    init(exercise: String) {
        self.exercise = exercise
        self._exercisesets = FetchRequest(
            entity: ExerciseSet.entity(),
            sortDescriptors: [],
            predicate: NSPredicate(format: "exercisename == %@", exercise as any CVarArg)
        )
    }
        
    var exerciseMaxRepsArray: [ExerciseSet] {
        var seenDates: Set<Date> = []
        return exercisesets
            .sorted { $0.reps > $1.reps } // you can skip this line if already sorted by weight in the @fetchrequest
            .filter { seenDates.insert($0.dateCompleted.startOfDay).inserted }
            .sorted { $0.dateCompleted < $1.dateCompleted }
    }
    
    var body: some View {
        
        if #available(iOS 16.0, *) {
            ZStack{
                CustomColor.backgroundColor.edgesIgnoringSafeArea(.all)
                // for weights on that day, return from largest to smallest and use highest from that day
                
                VStack {
                    Text(exercise)
                        .font(Font.custom("Montserrat-SemiBold", size: 24))
                        .foregroundColor(CustomColor.darkGreen)
                        .background(CustomColor.backgroundColor)

                        GroupBox(label: Text("Daily Max Reps")
                            .font(Font.custom("Montserrat-SemiBold", size: 18))
                            .foregroundColor(CustomColor.darkGreen)) {
                                
                                
                                Chart(exerciseMaxRepsArray) { e in
                                    LineMark(x: .value("Date", e.dateCompleted, unit: .day),
                                             y: .value("Reps", e.reps)
                                             
                                    ).foregroundStyle(CustomColor.lightGreen)
                                }
                                .chartYAxisLabel(position: .trailing, alignment: .center) {
                                    Text("Reps")
                                        .font(Font.custom("Montserrat-Medium", size: 16))
                                        .foregroundColor(CustomColor.darkGreen)
                                }
                                .chartXAxisLabel(position: .bottom, alignment: .center) {
                                    Text("Date")
                                        .font(Font.custom("Montserrat-Medium", size: 16))
                                        .foregroundColor(CustomColor.darkGreen)
                                }
                                .padding()
                            } .groupBoxStyle(BackgroundGroupBoxStyle()) //.background(CustomColor.backgroundColor)
                    }
                    
                }
                
                
            }
        }
    }
    

Answer 1

它对我来说工作得很好，我可以在模型数据代码中添加一些东西吗？

这是我的工作示例：

struct Exercise: Identifiable {
    let id = UUID()
    var dateCompleted: Date
    var reps: Int
}


struct ContentView: View {
    
    private var exerciseMaxRepsArray: [Exercise] = []

    init() { // init dummy data
        for i in 0 ..< 10 {
            let date = Calendar.current.date(byAdding: .day, value: i, to: .now) ?? .now
            let rep = Int.random(in: 1...10)
            exerciseMaxRepsArray.append(
                Exercise(dateCompleted: date, reps: rep)
            )
        }
    }

    var body: some View {
        
        GroupBox(label: Text("Daily Max Reps")) {
            Chart(exerciseMaxRepsArray) { e in
                LineMark(x: .value("Date", e.dateCompleted, unit: .day),
                         y: .value("Reps", e.reps)
                ) }
            .chartYAxisLabel(position: .trailing, alignment: .center) {
                Text("Reps")
            }
            .chartXAxisLabel(position: .bottom, alignment: .center) {
                Text("Date")
            }
            .padding()
        }
    }
}