SwiftUI折线图：调整Y轴刻度标签位置并让图表占满可用宽度的方法

嘿，我之前也碰到过一模一样的问题！你已经把Y轴标签挪到网格线下方了，但SwiftUI Chart默认还是会为原来的标签位置预留左侧空间，导致图表没法占满整个可用宽度。下面给你两个亲测有效的解决思路：

方法一：自定义Y轴时消除预留空间 #

这个方法最直接，我们在自定义Y轴的同时，明确告诉图表不要为Y轴标签预留额外的左侧空间，同时调整标签的位置让它对齐到网格线下方：

var body: some View {
    Chart {
        ForEach(0..<data.count, id: \.self) { i in
            LineMark(
                x: .value("X", i+1),
                y: .value("Value", data.values[i])
            )
            .foregroundStyle(.red)
            .interpolationMethod(.catmullRom)
            .lineStyle(StrokeStyle(lineWidth: 4))
        }
    }
    .chartYScale(domain: [0, data.maxValue])
    .chartYAxis {
        // 自定义Y轴标记，保留左侧位置
        AxisMarks(position: .leading, values: .automatic(desiredCount: 4)) { value in
            // 保留横向网格线
            AxisGridLine()
            // 保留Y轴刻度线
            AxisTick()
            // 将标签锚定到网格线的topLeading位置（即网格线下方）
            AxisValueLabel(anchor: .topLeading)
                // 可选：加小偏移让标签和网格线的间距更美观
                .offset(x: 4, y: 2)
        }
    }
    // 关键设置：把Y轴预留空间设为0，让图表占满左侧可用宽度
    .chartYAxis(reservedSpace: 0)
    // 可选：调整图表内容区域的内边距，让布局更紧凑
    .chartPlotStyle { plotArea in
        plotArea.padding(.leading, 0)
    }
}

方法二：将Y轴标签嵌入图表内容区域 #

如果上面的方法还没完全解决，你可以试试把Y轴标签直接放在图表的内容区域内，彻底摆脱默认的轴空间限制：

// 先提前计算好Y轴需要显示的刻度值
private var yAxisValues: [Double] {
    let step = data.maxValue / 3
    return [0, step, step*2, data.maxValue]
}

var body: some View {
    Chart {
        ForEach(0..<data.count, id: \.self) { i in
            LineMark(
                x: .value("X", i+1),
                y: .value("Value", data.values[i])
            )
            .foregroundStyle(.red)
            .interpolationMethod(.catmullRom)
            .lineStyle(StrokeStyle(lineWidth: 4))
        }
        // 手动添加Y轴标签，完全掌控位置
        ForEach(yAxisValues, id: \.self) { value in
            Text(String(format: "%.0f", value))
                .position(
                    x: 0, // 固定在图表左侧
                    y: ChartYScale.convert(value, from: .domain, to: .plot)
                )
        }
    }
    .chartYScale(domain: [0, data.maxValue])
    // 隐藏默认Y轴，避免重复
    .chartYAxis(.hidden)
    .chartPlotStyle { plotArea in
        plotArea.padding(.leading, 20) // 给手动添加的标签预留显示空间
    }
}

这个方法需要你自己计算Y轴的刻度值，但好处是能完全掌控标签的位置和样式，图表也能彻底占满可用宽度。

为什么原来的代码没生效？ #

你之前用AxisValueLabel(anchor: .topLeading)只是改变了标签的绘制位置，但SwiftUI Chart的布局系统还是按照默认的Y轴配置预留了左侧空间。只有通过reservedSpace或者完全自定义标签的方式，才能让布局系统知道不需要再预留那部分空间，从而让图表占满整个宽度。

备注：内容来源于stack exchange，提问作者Andrei Herford