在 Swift 图表中旋转轴标签

Question

我在 SwiftUI 应用程序中使用 Swift Charts 来制作折线图。我想旋转 Y 轴标签，使其从下到上读取。我尝试旋转文本，但旋转导致标签无法正确渲染。有没有办法旋转轴标签？

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(180))
        }
        .chartYAxis {
            AxisMarks(position: .leading)
        }
        .padding()
        .frame(minWidth: 400, minHeight: 300)
    }
}

该示例生成的窗口如下所示。请注意，Y 轴的标签无法正确显示。

Answer 1

此问题似乎是由标签所需的空间引起的。

例如，通过将线条添加.frame(minWidth: 55, minHeight: 50)到旋转的文本中，问题就得到了解决（但是，标签需要大量空间，我无法解决）。

更新了chartYAxisLabel代码：

 .chartYAxisLabel(position: .leading) {
                Text("The y-axis")
                    .rotationEffect(.degrees(180))
                    .frame(minWidth: 55, minHeight: 50)
        }

更新预览：

）