如何在SwiftUI Charts中实现BarMarks的对齐？

默认SwiftUI Charts会让BarMark自动占满可用宽度，即使手动设置了width参数，Bar之间也会被分配多余空间。要实现Bar左对齐的效果，无需手动调整frame宽度，可以通过以下方式实现：

解决方案代码 #

import SwiftUI
import Charts

struct ContentView: View {
    // 用数组统一管理数据，更易维护
    let data = [("A", 100), ("B", 150)]
    
    var body: some View {
        Chart(data, id: \.0) { item in
            BarMark(x: .value("Item", item.0),
                    y: .value("Rating", item.1),
                    width: 3.0)
        }
        // 让绘图区域内容左对齐
        .chartPlotStyle { plotArea in
            plotArea.frame(maxWidth: .infinity, alignment: .leading)
        }
        // 明确指定X轴范围，避免自动扩展空间
        .chartXScale(domain: data.map(\.0))
        .frame(height: 200)
    }
}

关键说明 #

• .chartPlotStyle：调整绘图区域的对齐方式为.leading，让所有BarMark靠左排列，而非强制占满整个图表宽度。
• .chartXScale(domain:)：明确指定X轴的分类范围为现有数据项，防止图表自动扩展X轴空间，导致Bar之间出现不必要的大间距。
• 这种方式无需手动计算Bar数量来调整frame，适配性更强，新增或删除Bar时无需修改布局代码。

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