如何反转SwiftUI Chart的Y轴？实现数值由下至上绘制

要实现心率数值从下到上排列（底部显示最小值，顶部显示最大值），只需修改Y轴的定义域配置即可，无需额外调整线段坐标计算：

修改步骤 #

将原代码中chartYScale的定义域顺序反转，把[minHeartRate, maxHeartRate]改为[maxHeartRate, minHeartRate]，同时移除多余的range参数（SwiftUI Charts会自动根据定义域适配范围）。

修改后的完整代码 #

struct HeartRateChart: View {
    let dateInterval: DateInterval
    let segments: [HeartRateSegment]
    let maxHeartRate: CGFloat
    let minHeartRate: CGFloat
    
    init(dateInterval: DateInterval, segments: [HeartRateSegment], maxHeartRate: Int, minHeartRate: Int) {
        self.dateInterval = dateInterval
        self.segments = segments
        self.maxHeartRate = CGFloat(maxHeartRate)
        self.minHeartRate = CGFloat(minHeartRate)
    }
    
    var body: some View {
        Chart {
            ForEach(segments, id: \.startDate) { segment in
                let yStart: CGFloat = CGFloat(segment.samples.min()?.heartRate ?? 0)
                let yEnd: CGFloat = CGFloat(segment.samples.max()?.heartRate ?? 0)
                RuleMark(x: .value("startDate", segment.startDate), yStart: yStart, yEnd: yEnd)
            }
        }
        // 反转Y轴定义域，让最大值在顶部、最小值在底部
        .chartYScale(domain: [maxHeartRate, minHeartRate])
        .aspectRatio(contentMode: .fit)
        .chartYAxis {
            AxisMarks(values: [minHeartRate, maxHeartRate])
        }
        .chartXScale(domain: [dateInterval.start, dateInterval.end])
        .chartPlotStyle { content in
            content.frame(height: 200)
        }
        .padding()
    }
}

原理说明 #

SwiftUI Charts的chartYScale通过定义域的顺序控制轴的显示方向：

• 原配置[minHeartRate, maxHeartRate]会让Y轴从上到下依次展示最小值到最大值
• 反转后的[maxHeartRate, minHeartRate]会让Y轴方向颠倒，视觉上呈现底部为最小值、顶部为最大值的效果，对应的心率线段也会自动从底部的最小心率延伸到顶部的最大心率，完全符合需求。

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