Swift图表中的旋转轴标签

yjghlzjz  于 2023-05-05  发布在  Swift
关注(0)|答案(1)|浏览(180)

我在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轴的标签显示不正确。

pgvzfuti

pgvzfuti1#

这个问题似乎是由标签所需的空间引起的。
例如,通过将行.frame(minWidth: 55, minHeight: 50)添加到旋转的文本,问题得到解决(但是,标签需要大量空间,我无法解决)。
更新chartYAxisLabel代码:

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

更新预览:


相关问题