SwiftUI Charts：如何仅在绘制的折线下方显示RuleMark

要让RuleMark只出现在折线下方（从Y轴底部到对应数据点的位置），核心是给RuleMark指定Y轴的起止范围，而非让它默认贯穿整个图表高度。另外你代码里RuleMark的x轴标签写错了，得和LineMark保持一致。

修改后的完整代码如下：

struct Item: Identifiable {
    var date: String
    var count: Double
    var id = UUID()
}

var data: [Item] = [
    .init(date: "10AM", count: 5),
    .init(date: "12AM", count: 4),
    .init(date: "2PM", count: 7),
    .init(date: "4PM", count: 2),
    .init(date: "6PM", count: 9)
]

struct ContentView: View {
    // 计算数据中的最小count值，也可以直接固定为0
    private let minCount = data.map { $0.count }.min() ?? 0
    
    var body: some View {
        Chart(data) { item in    
            LineMark(
                x: .value("Date", item.date),
                y: .value("Value", item.count)
            )
            
            PointMark(
                x: .value("Date", item.date),
                y: .value("Value", item.count)
            )
            
            RuleMark(
                x: .value("Date", item.date),
                yStart: .value("Min Value", minCount),
                yEnd: .value("Current Value", item.count)
            )
            .foregroundStyle(.gray.opacity(0.3)) // 可调整样式让网格线更柔和
        }
        .chartYAxis(.hidden)
    }
}

关键修改说明： #

• 给RuleMark添加yStart和yEnd参数，分别指定Y轴起始值（这里用数据最小count，也可固定为0）和当前数据点的count值，限制RuleMark的垂直显示范围
• 修正RuleMark的x轴value标签为"Date"，与LineMark、PointMark保持一致，避免图表识别错误
• 通过foregroundStyle可自定义RuleMark的颜色和透明度，让它更贴合网格线的视觉效果

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