SwiftUI图表Y轴位置调整问题：如何将Y轴从右侧移至左侧

你好！看了你的温度图表代码，要把Y轴从右侧移到左侧其实很简单，只需要给chartYAxis添加一个位置参数就能搞定，具体修改步骤如下：

关键修改点 #

在你的Chart配置里，找到.chartYAxis() { ... }这一段，给它加上position: .leading参数，强制Y轴显示在左侧：

.chartYAxis(position: .leading) {  // 这里添加position参数，指定Y轴在左侧
    AxisMarks(values: xAxisPoints) { val in
        AxisGridLine()
        AxisValueLabel {
            if let v = val.as(Double.self) {
                Text(String(format: "%.1fº", v))
            }
        }
    }
}

为什么这样改？ #

因为你用了ScrollView(.horizontal)包裹Chart，SwiftUI的Chart组件在水平滚动场景下，默认会把Y轴布局到右侧来适配滚动方向。通过显式指定position: .leading，我们可以强制让Y轴固定在图表的左侧位置，和常规的图表布局一致。

修改后的完整Chart代码片段 #

为了方便你直接替换，这里贴出包含修改的完整Chart部分代码：

ScrollView(.horizontal) {
    Chart {
        ForEach(temperatures) { temp in
            PointMark(
                x: .value("Time", temp.time),
                y: .value("Temperature", temp.value)
            )
            .foregroundStyle(Color.red)
            .symbolSize(100)
        }
    }
    .chartXScale(domain: oneHourAgo...now)
    .chartXAxis {
        AxisMarks(values: tickTimes) { val in
            //AxisGridLine()
            AxisValueLabel {
                if let date = val.as(Date.self) {
                    Text(date, format: .dateTime.hour().minute())
                }
            }
        }
    }
    .chartYScale(domain: 35.0...39.0)
    .chartYAxis(position: .leading) {  // 已修改：指定Y轴在左侧
        AxisMarks(values: xAxisPoints) { val in
            AxisGridLine()
            AxisValueLabel {
                if let v = val.as(Double.self) {
                    Text(String(format: "%.1fº", v))
                }
            }
        }
    }
    .chartPlotStyle { plotArea in
        plotArea
            .background(
                VStack(spacing: 0) {
                    Color.orange.opacity(0.1).frame(height: 40)
                    Color.green.opacity(0.05).frame(height: 40)
                    Color.orange.opacity(0.1).frame(height: 40)
                }
            )
    }
    .frame(minWidth: 600, maxHeight: 250)
}

额外小提示 #

如果后续你不需要水平滚动，去掉外层的ScrollView(.horizontal)后，Chart会默认把Y轴放在左侧，不需要额外指定position参数哦。

内容来源于stack exchange