SwiftUI Charts并列柱状图问题：如何实现两组数据并排显示？

你当前实现的核心问题是X轴绑定了chainring字段，这相当于把"one"和"two"作为两个独立的X轴分组，导致两组柱状图被分开显示。要实现并列效果，需要将X轴绑定到齿轮的位置索引，同时让每个齿轮位置对应两个不同chainring的数值。

步骤1：重构数据结构 #

首先把嵌套的数组扁平化，让每个条目对应一个齿轮位置的单个chainring数据（可以手动定义，也可以用代码自动生成）：

自动生成扁平化数据（推荐） #

let wheelDevelopmentArray = [
    (chainring: "one", eff:[75, 69, 64, 60, 56, 53, 47, 43, 39, 36, 32]),
    (chainring: "two", eff:[110, 101, 94, 88, 82, 77, 69, 63, 57, 53, 47])
]

// 自动将嵌套数据转为扁平化结构
let wheelData: [(gear: Int, chainring: String, eff: Int)] = wheelDevelopmentArray.flatMap { chainringData in
    chainringData.eff.enumerated().map { index, value in
        (gear: index, chainring: chainringData.chainring, eff: value)
    }
}

步骤2：修改Chart实现 #

将X轴绑定到齿轮索引，用foregroundStyle区分chainring类型，SwiftUI Charts会自动在同一X轴位置并列显示不同的柱状图：

struct ContentView: View {
    var body: some View {
        let wheelDevelopmentArray = [
            (chainring: "one", eff:[75, 69, 64, 60, 56, 53, 47, 43, 39, 36, 32]),
            (chainring: "two", eff:[110, 101, 94, 88, 82, 77, 69, 63, 57, 53, 47])
        ]
        
        let wheelData: [(gear: Int, chainring: String, eff: Int)] = wheelDevelopmentArray.flatMap { chainringData in
            chainringData.eff.enumerated().map { index, value in
                (gear: index, chainring: chainringData.chainring, eff: value)
            }
        }
        
        Chart(wheelData) { data in
            BarMark(
                x: .value("Gear", data.gear),
                y: .value("Efficiency", data.eff)
            )
            .foregroundStyle(by: .value("ChainRing", data.chainring))
        }
        .chartXAxis {
            AxisMarks(values: .stride(by: 1)) { value in
                AxisValueLabel("\(value.index)")
            }
        }
        .padding()
    }
}

关键修改说明 #

1. X轴绑定目标变更：从chainring改为齿轮索引gear，让每个齿轮位置成为X轴的独立分组
2. 数据结构扁平化：每个齿轮位置对应两个chainring的数值，确保同一X位置有两个数据点
3. 移除手动布局参数：删掉了width和position(by:)，让Charts自动处理并列柱状图的间距与布局，避免手动设置导致的错位

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