Swift Charts：如何绘制具有独立于数据的固定梯度的折线图？

通过应用线性渐变的方式，您将需要动态地将停止位置转换到不同的范围。

您的止损设置为 0...1，预期图形数据范围为 50...210。但由于 50...210 并不是一成不变的，因此您的止损也不应该是一成不变的。

正如您所看到的，要在图表上看到渐变的一部分，其停止点必须在 0...1 之内或之上。低于 0 或高于 1 的颜色要么根本看不到，要么只看到部分。我们需要做的是根据线标记的最大值和最小值，将您的止损点映射到大于 0...1 的范围。

首先，我们需要将止损点从 0...1 形式中去掉，改为 50...210 表示形式。这只是简单地取(210 - 50) * stop_value（例如：blue_stop = (210 - 50) * 0.16) ~= 75）。为了简单起见，我选择对所有值进行四舍五入。

有了这些值，我们只需将它们映射到图表的绘制范围即可。绘制的范围是minimum_y...maximum_y。下面的函数可以帮助将地图从一个范围映射到另一个范围。

func transform<T: FloatingPoint>(_ input: T, from inputRange: ClosedRange<T>, to outputRange: ClosedRange<T>) -> T {
    // need to determine what that value would be in (to.low, to.high)
    // difference in output range / difference in input range = slope
    let slope = (outputRange.upperBound - outputRange.lowerBound) / (inputRange.upperBound - inputRange.lowerBound)
    // slope * normalized input + output lower
    let output = slope * (input - inputRange.lowerBound) + outputRange.lowerBound
    return output
}

现在我们有了要映射的值，以及映射它们的函数。当我们加载图表时，我们可以动态生成止损点。下面是生成止损的函数。

func generateStops(minValue: Double, maxValue: Double) -> [Gradient.Stop] {
    var realStops = [Gradient.Stop]()
    // ideal stop values, if the range were to be from 50 to 210
    let idealStops: [(Double, Color)] = [
        (50, .gray),
        (75, .blue),
        (100, .yellow),
        (130, .orange),
        (155, .red),
        (210, .purple)
    ]
    for (idealValue, color) in idealStops {
        let transformedValue = transform(idealValue, from: minValue...maxValue, to: 0...1)
        realStops.append(Gradient.Stop(color: color, location: transformedValue))
    }
    return realStops
}

使用generateStops我们可以更新原始视图以获得始终准确于数据点的梯度。请注意，为了适应该示例，某些内容已从原始内容中更改。

struct MyGraphView : View {
    @State var values: [(id: Int, x: Date, y: Double)] = []
    @State var stops: [Gradient.Stop] = []

    var body: some View {
        Chart {
            ForEach(values, id: \.id) { value in
                LineMark(
                    x: .value("Sample Time", value.x, unit: .nanosecond),
                    y: .value("Heart Rate", value.y)
                )
                .lineStyle(StrokeStyle(lineWidth: 3.0))
            }
        }
        .chartYScale(domain: 50...210)
        .foregroundStyle(
            .linearGradient(
                stops: stops,
                startPoint: .bottom,
                endPoint: .top
            )
        )
        .onAppear(perform: {
            values = exampleValues
            stops = generateStops(minValue: values.first!.y, maxValue: values.last!.y)
        })
    }
}