Swift Charts：设置Y轴标签固定宽度实现多垂直图表对齐

要解决Y轴标签长度不一导致的X轴错位问题，核心是给Y轴标签设置固定宽度并统一对齐方式，具体实现如下：

基础解决方案 #

直接自定义AxisValueLabel的内容，通过frame固定宽度并设置右对齐，确保所有标签占据相同宽度：

.chartYAxis {
    AxisMarks(position: .leading) { value in
        AxisGridLine()
        AxisValueLabel {
            // 将Y轴数值转为字符串，固定宽度并右对齐
            Text("\(value.as(Double.self) ?? 0)")
                .frame(width: 60, alignment: .trailing) // 可根据最长标签调整宽度值
        }
    }
}

带数值格式化的进阶方案 #

如果需要对Y轴数值做格式化（比如保留小数、千分位分隔），可以配合NumberFormatter使用：

// 提前定义数值格式化器
private let yAxisFormatter: NumberFormatter = {
    let formatter = NumberFormatter()
    formatter.numberStyle = .decimal
    formatter.minimumFractionDigits = 0
    formatter.maximumFractionDigits = 2
    return formatter
}()

// 图表的Y轴配置
.chartYAxis {
    AxisMarks(position: .leading) { value in
        AxisGridLine()
        AxisValueLabel {
            let rawValue = value.as(Double.self) ?? 0
            let displayText = yAxisFormatter.string(from: NSNumber(value: rawValue)) ?? "\(rawValue)"
            Text(displayText)
                .frame(width: 70, alignment: .trailing) // 调整宽度适配格式化后的最长文本
        }
    }
}

说明：

• 固定宽度的数值可以根据你实际最长的Y轴标签长度调整，确保能完全容纳所有标签内容
• 设置.trailing（右对齐）能让不同长度的标签统一靠右，避免左侧留白不一致导致的宽度偏移

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