SwiftUI：如何避免BarMark合并并仅显示首尾X轴标签

现象重现 #

原本代码能正常显示5个独立的BarMark：

struct Record: Identifiable {
    var id = UUID()
    var altitude: Int
    var speed: Double
    var time: Int
}

struct TestView: View {
    
    @State private var records:[Record] = [
       Record(altitude: 15000, speed: 830, time: 1),
       Record(altitude: 15000, speed: 830, time: 2),
       Record(altitude: 15000, speed: 830, time: 3),
       Record(altitude: 15000, speed: 830, time: 4),
       Record(altitude: 15000, speed: 830, time: 5)
    ]
    
    var body: some View {
        VStack{
            Chart(records) { record in
                BarMark(x: .value("Date", String(record.time)), y: .value("Level", record.speed))
            }.frame(height: 200)
        }
    }
}

修改后试图隐藏中间X轴标签，却导致中间3个Bar合并成一个：

struct TestView: View {
    
    @State private var records:[Record] = [
       Record(altitude: 15000, speed: 830, time: 1),
       Record(altitude: 15000, speed: 830, time: 2),
       Record(altitude: 15000, speed: 830, time: 3),
       Record(altitude: 15000, speed: 830, time: 4),
       Record(altitude: 15000, speed: 830, time: 5)
    ]
    
    var body: some View {
        VStack{
            Chart(0..<records.count, id: \.self) { index in
                BarMark(x: .value("time", index == 0 || index == records.count-1 ? String(records[index].time) : ""), y: .value("speed", records[index].speed))
            }.frame(height: 200)
        }
    }
}

原因分析 #

• SwiftUI Chart的分组逻辑是基于X轴值的：当多个BarMark的X轴值相同时，会自动合并到同一分组，叠加显示成一个Bar。
• 你给中间3个Bar的X轴值设为空字符串，这三个Bar会被判定为属于同一X类别，最终合并渲染。

解决方法 #

不要修改Bar的X轴数值，而是通过chartXAxis modifier自定义轴标签的显示逻辑，精准控制仅显示首尾标签：

struct Record: Identifiable {
    var id = UUID()
    var altitude: Int
    var speed: Double
    var time: Int
}

struct TestView: View {
    
    @State private var records:[Record] = [
       Record(altitude: 15000, speed: 830, time: 1),
       Record(altitude: 15000, speed: 830, time: 2),
       Record(altitude: 15000, speed: 830, time: 3),
       Record(altitude: 15000, speed: 830, time: 4),
       Record(altitude: 15000, speed: 830, time: 5)
    ]
    
    var body: some View {
        VStack{
            Chart(records) { record in
                BarMark(x: .value("Time", record.time), y: .value("Speed", record.speed))
            }
            .chartXAxis {
                AxisMarks(position: .bottom) { value in
                    // 仅渲染首尾位置的标签
                    if value.index == 0 || value.index == records.count - 1 {
                        AxisGridLine()
                        AxisTick()
                        AxisLabel(content: {
                            Text(String(value.as(Int.self)!))
                        })
                    } else {
                        // 中间项保留网格线和刻度（可根据需求移除）
                        AxisGridLine()
                        AxisTick()
                        // 不显示标签
                    }
                }
            }
            .frame(height: 200)
        }
    }
}

这个方案的优势：

• 保留每个Bar独立的X轴值，避免合并逻辑触发，5个Bar能正常显示。
• 通过自定义轴标记，完全控制标签的显示规则，满足仅显示首尾标签的需求。

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