Swift Charts中如何调整BarMark与LineMark的图层显示顺序？

问题现象 #

在Swift Charts中同时绘制BarMark（展示min/max数值范围）和LineMark（展示中间值）时，出现LineMark被BarMark遮挡的问题：仅第一个LineMark显示在BarMark上方，其余所有LineMark都被下方的BarMark遮挡。

原因分析 #

当前代码在遍历每个数据项时，会依次绘制对应数据的BarMark和LineMark，渲染顺序为Bar1 → Line1 → Bar2 → Line2 → ... → Bar12 → Line12。由于Swift Charts中后添加的Mark层级更高，后续数据项的BarMark会覆盖前面数据项的LineMark；而第一个LineMark之后没有其他BarMark覆盖它，因此能正常显示在上方。

解决方法 #

将所有BarMark和LineMark分别放在独立的ForEach块中，先绘制全部BarMark，再绘制全部LineMark，确保LineMark的整体层级在BarMark之上。

修改后的完整代码 #

struct DataItem: Identifiable {
    var id: Int { month }
    let month: Int
    let min: Int
    let max: Int
    let mid: Int
    
    static var data: [DataItem] = {
        var items = [DataItem]()
        for i in 1...12 {
            let min = Int.random(in: 1...50)
            let max = Int.random(in: 51...100)
            let mid = (max - min)/2 + min
            items.append(DataItem(month: i, min: min, max: max, mid: mid))
        }
        return items
    }()
}

import SwiftUI
import Charts

struct ChartView: View {
    var data: [DataItem]
    var body: some View {
        Chart {
            // 先绘制所有柱状图，作为底层
            ForEach(data) { dataItem in
                BarMark(
                    x: .value("Month", dataItem.month),
                    yStart: .value("Min", dataItem.min),
                    yEnd: .value("Max", dataItem.max)
                )
            }
            
            // 再绘制所有折线点，作为上层
            ForEach(data) { dataItem in
                LineMark(
                    x: .value("Month", dataItem.month),
                    y: .value("Mid", dataItem.mid)
                )
                .symbol(.circle)
                .foregroundStyle(.green)
            }
        }
    }
}

#Preview {
    ChartView(data: DataItem.data)
}

效果说明 #

修改后，所有BarMark会先完成渲染，之后LineMark统一渲染在所有BarMark的上方，所有折线点都不会被柱状图遮挡，完全符合需求。

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