Swift Charts中如何旋转Y轴标签使其从下到上正常显示？

你当前的代码中，直接对Y轴标签应用180度旋转后显示异常，原因是旋转后视图的布局锚点和空间分配未适配，导致标签被挤出可视区域。以下是两种可行的解决方案：

方法一：旋转-90度实现正立的从下到上标签 #

这是最常用的方案，旋转后文字正立，自然沿Y轴从下到上排列，Swift Charts会自动处理布局空间：

修改.chartYAxisLabel部分的代码即可：

.chartYAxisLabel(position: .leading) {
    Text("The y-axis")
        .rotationEffect(.degrees(-90)) // 替换为-90度旋转
}

完整修改后的代码：

import SwiftUI
import Charts

struct ContentView: View {

    struct Point: Identifiable {
        let id = UUID()
        let x: Float
        let y: Float
    }

    let points = [
        Point(x: 0, y: 1),
        Point(x: 1, y: 4.5),
        Point(x: 2, y: 3),
        Point(x: 3, y: 6),
        Point(x: 4, y: 7),
        Point(x: 5, y: 5.2),
        Point(x: 6, y: 9),
        Point(x: 7, y: 12.5),
    ]

    var body: some View {
        Chart {
            ForEach(points) { point in
                LineMark(
                    x: .value("X values", point.x),
                    y: .value("Y values", point.y)
                )
            }
        }
        .chartXAxisLabel("The x-axis", alignment: .center)
        .chartYAxisLabel(position: .leading) {
            Text("The y-axis")
                .rotationEffect(.degrees(-90)) // 关键修改：旋转-90度
        }
        .chartYAxis {
            AxisMarks(position: .leading)
        }
        .padding()
        .frame(minWidth: 400, minHeight: 300)
    }
}

方法二：180度旋转适配布局（倒序文字） #

如果需要文字倒过来但保持从下到上的排列，需调整布局锚点和空间分配，确保标签在可视区域内：

.chartYAxisLabel(position: .leading) {
    Text("The y-axis")
        .rotationEffect(.degrees(180), anchor: .center)
        .frame(maxHeight: .infinity) // 占满Y轴高度空间
        .alignmentGuide(.leading) { $0[.trailing] } // 调整对齐方式
}

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