SwiftUI水平滚动Chart中Y轴固定问题的解决方法咨询

要实现水平滚动时Y轴固定，核心是将Y轴与可滚动的图表区域分离布局，避免Y轴随图表内容一同滚动。具体实现方式如下：

• 用HStack将独立的Y轴视图和可滚动的Chart区域并排摆放
• 隐藏Chart自身的Y轴，避免重复显示
• 抽离Y轴样式代码，保证固定Y轴与原Chart的Y轴视觉一致

修改后的完整代码：

struct DataPoint: Identifiable {
    var id = UUID()
    let x: Double
    let y: Double
}

let minGlobalX: Double = 0
let maxGlobalX: Double = 100

let data: [DataPoint] = (Int(minGlobalX) ..< Int(maxGlobalX)).map { DataPoint(x: Double($0), y: Double(arc4random()) / Double(UInt32.max)) }

struct ContentView: View {
    // 复用Y轴样式，确保视觉统一
    private var yAxisContent: some View {
        AxisMarks(position: .leading, values: [0, 0.5, 1]) { value in
            AxisGridLine(stroke: .init(lineWidth: 1))
            AxisTick(stroke: .init(lineWidth: 1))
            AxisValueLabel()
        }
    }
    
    var body: some View {
        HStack(spacing: 0) {
            // 固定在左侧的Y轴
            yAxisContent
                .frame(width: 40) // 设置固定宽度，避免布局偏移
            
            // 可水平滚动的Chart区域
            Chart(data) {
                LineMark(
                    x: .value("x", $0.x),
                    y: .value("y", $0.y)
                )
                .lineStyle(StrokeStyle(lineWidth: 1))
            }
            .chartScrollableAxes(.horizontal)
            .chartXScale(domain: [minGlobalX, maxGlobalX])
            .chartXAxis {
                AxisMarks(position: .bottom, values: [0, 25, 50, 75, 100]) {
                    AxisGridLine(stroke: .init(lineWidth: 1))
                    AxisTick(stroke: .init(lineWidth: 1))
                    AxisValueLabel()
                }
            }
            .chartYScale(domain: [0, 1])
            .chartYAxis(.hidden) // 隐藏Chart自带的Y轴，避免重复
        }
        .padding(20)
    }
}

关键细节说明 #

1. 分离布局逻辑：通过HStack拆分Y轴和Chart区域，滚动仅作用于右侧的Chart部分，左侧Y轴保持固定。
2. 样式复用：将Y轴的刻度、网格线样式抽成独立变量，保证固定Y轴与原Chart的Y轴样式完全匹配。
3. 隐藏自带Y轴：使用.chartYAxis(.hidden)移除Chart自身的Y轴，防止出现双Y轴的视觉问题。
4. 固定Y轴宽度：给独立Y轴设置固定宽度，避免图表滚动时Y轴宽度变化，维持布局稳定性。

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