SwiftUI 如何防止多个 BarMark 折叠成 1 个 BarMark

Question

Here's what my code looks like, and it shows 5 BarMarks.

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)
        }
    }
}

But I want to show x-labels for only first one and last one.

So here is what I have tried. Provide empty X label strings when index is not first or last one using ternary operator.

Now it shows X-labels only for first and last one, but now all three middle BarMarks got collpased in one.

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)
        }
    }
}

Does anyone know why this behavior is happening and how I can prevent this from happening?

Answer 1

In your approach you are directly modifying the plot values. So Chart "sees" only 3 different x values: "1","","5" – and adds up all y values with the x value "".

To achieve what you want you can directly modify the xAxis appearance:

Add this modifier to your chart and leave the plot values as in your initial code.

            .chartXAxis {
                AxisMarks { value in
                    AxisGridLine()
                    AxisTick()
                    // only show first and last xAxis value label
                    if value.index == 0 || value.index == value.count-1 {
                        AxisValueLabel()
                    }
                }
            }