Swift Charts：如何在折线图中高亮填充指定区域？

要实现填充灰色区域表示正常范围，你可以用RectangleMark替代原来的两个RuleMark，它能指定Y轴范围并填充颜色，同时记得把填充区域放在折线图下方，避免遮挡折线。

修改后的完整代码如下：

import SwiftUI
import Charts

struct ContentView: View {
    
    struct StepCount: Identifiable {
        let id = UUID()
        let weekday: Date
        let steps: Int
        
        init(day: String, steps: Int) {
            let formatter = DateFormatter()
            formatter.dateFormat = "yyyyMMdd"
            
            self.weekday = formatter.date(from: day) ?? Date.distantPast
            self.steps = steps
        }
    }
    
    let currentWeek: [StepCount] = [
        StepCount(day: "20220717", steps: 4200),
        StepCount(day: "20220718", steps: 15000),
        StepCount(day: "20220719", steps: 2800),
        StepCount(day: "20220720", steps: 10800),
        StepCount(day: "20220721", steps: 12370),
        StepCount(day: "20220722", steps: 9500),
        StepCount(day: "20220723", steps: 3700)
    ]
    
    // 定义正常范围的上下限
    let normalRangeMin = 6000
    let normalRangeMax = 10000
    
    var body: some View {
        VStack {
            Chart {
                // 先添加填充区域，确保在折线下方
                RectangleMark(
                    yStart: .value("正常范围下限", normalRangeMin),
                    yEnd: .value("正常范围上限", normalRangeMax)
                )
                .foregroundStyle(Color.gray.opacity(0.3)) // 半透明灰色填充
                
                ForEach(currentWeek) {
                    LineMark(
                        x: .value("星期", $0.weekday, unit: .day),
                        y: .value("步数", $0.steps)
                    )
                }
            }
        }
        .frame(height: 200)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键说明： #

• 使用RectangleMark的yStart和yEnd参数，精准指定填充区域的Y轴范围
• 设置半透明灰色的foregroundStyle，既突出范围又不会遮挡上方的折线数据
• 将填充区域的代码放在折线绘制代码之前，确保它被渲染在底层，不会覆盖折线

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