Swift Charts：如何绘制与数据无关的固定渐变折线图？

核心思路是让渐变的位置（location）基于实际心率数据的范围动态计算，而非固定的0.0~1.0比例，这样颜色就能精准对应到心率区间，不会出现数据未覆盖的颜色依然显示的问题。

步骤1：计算实际心率数据的范围 #

先从处理后的心率数组中提取最小、最大心率值，作为动态计算的基准：

let processedHeartRates = smoothHeartRatesEMA(customHeartRates, decayFactor: 0.3)
guard let minHR = processedHeartRates.min(by: { $0.doubleValue < $1.doubleValue })?.doubleValue,
      let maxHR = processedHeartRates.max(by: { $0.doubleValue < $1.doubleValue })?.doubleValue else {
    // 处理空数据场景
    return
}
// 避免心率值全相同时出现除以0错误
let hrRange = maxHR - minHR > 0 ? maxHR - minHR : 1

步骤2：定义颜色对应的心率阈值 #

把配色和对应的心率区间一一绑定，参考Apple Fitness的配色逻辑：

let colorThresholds: [(color: Color, hrValue: Double)] = [
    (.gray, 50),
    (TrackerConstants.AppleFitnessBlue, 70),
    (TrackerConstants.AppleFitnessYellow, 90),
    (TrackerConstants.AppleFitnessOrange, 110),
    (TrackerConstants.AppleFitnessRed, 150),
    (TrackerConstants.AppleFitnessPurple, 170)
]

步骤3：动态生成渐变停止点 #

遍历颜色阈值，将每个心率值转换成当前数据范围内的相对比例：

let gradientStops = colorThresholds.map { threshold in
    let location = (threshold.hrValue - minHR) / hrRange
    // 限制位置在0.0~1.0内，避免超出渐变区域
    return Gradient.Stop(color: threshold.color, location: location.clamped(to: 0.0...1.0))
}

步骤4：修改Chart代码使用动态渐变 #

替换原固定的stops数组为动态生成的gradientStops：

Chart {
    ForEach(processedHeartRates) { heartRate in
        LineMark(
            x: .value("Sample Time", heartRate.startDate, unit: .nanosecond),
            y: .value("Heart Rate", heartRate.doubleValue)
        )
        .lineStyle(StrokeStyle(lineWidth: 3.0))
        .foregroundStyle(
            .linearGradient(
                stops: gradientStops,
                startPoint: .bottom,
                endPoint: .top
            )
        )
    }
}
.chartYScale(domain: 50...210)

效果说明 #

• 若心率范围是70~110：灰色对应的位置会被修正为0.0，紫色对应的位置会被修正为1.0，最终渐变仅显示蓝色→黄色→橙色区间。
• 若心率范围是170~210：灰色、蓝色、黄色、橙色的位置都会被修正为0.0，渐变仅显示红色→紫色区间。

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