SwiftUI Charts坐标轴异常求助：X轴无日期Y轴仅显示0-9

嘿，我之前也碰到过类似的SwiftUI Charts轴显示不对劲的问题，咱们来一步步把它搞定！

问题分析 #

从你的代码和描述来看，主要有两个核心问题：

• Y轴刻度只到9：你的模拟数据reps范围是1-20，但图表默认的Y轴范围没有自动适配数据最大值，导致只显示了0-9的刻度区间。
• X轴无日期标签：当数据点较多（你这里有20个）时，SwiftUI Charts默认会自动减少X轴标签数量甚至隐藏，避免视觉重叠，所以日期没能正常显示。

解决方案 #

我们可以通过显式配置轴的属性来修复这两个问题，下面是修改后的完整代码：

import Charts
import SwiftUI

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

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

    init() { // 初始化模拟数据
        for i in 0 ..< 20 {
            let date = Calendar.current.date(byAdding: .day, value: i, to: .now) ?? .now
            let rep = Int.random(in: 1...20)
            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)
                )
            }
            // 修复Y轴：让轴范围自动适配数据最大值，显式显示刻度
            .chartYScale(domain: 0...(exerciseMaxRepsArray.map(\.reps).max() ?? 20))
            .chartYAxis {
                AxisMarks(position: .trailing) { value in
                    AxisGridLine()
                    AxisTick()
                    AxisLabel()
                }
            }
            .chartYAxisLabel(position: .trailing, alignment: .center) {
                Text("Reps")
            }
            // 修复X轴：强制显示日期标签，指定显示格式
            .chartXAxis {
                AxisMarks(position: .bottom) { value in
                    AxisGridLine()
                    AxisTick()
                    AxisLabel(format: .dateTime.day().month(), centered: true)
                }
            }
            .chartXAxisLabel(position: .bottom, alignment: .center) {
                Text("Date")
            }
        }
        .padding() // 给图表添加内边距，优化显示效果
    }
}

关键修改点说明 #

1. Y轴适配：

   • 用chartYScale(domain: 0...maxReps)强制Y轴范围从0到数据中的最大reps值，确保所有数据都能完整展示在图表内。
   • 通过chartYAxis显式配置网格线、刻度和标签，覆盖默认的自动隐藏逻辑。

2. X轴日期显示：

   • 用chartXAxis自定义轴标记，指定日期格式为day().month()，同时开启centered: true让标签居中对齐，确保每个日期都能显示出来。如果后续数据点过多导致标签重叠，你还可以通过stride参数设置间隔显示。

这样修改后，你的图表应该就能正常显示X轴的日期和完整的Y轴刻度啦！

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