Gráficos Swift: Como desenhar um gráfico de linhas com gradiente fixo independente dos dados?

Com a forma como o gradiente linear é aplicado, você precisará transformar dinamicamente os locais de parada em uma faixa diferente.

Suas paradas são configuradas para 0...1, com o intervalo de dados do gráfico esperado de 50...210. Mas como 50...210 não está definido, suas paradas também não deveriam ser.

Como você viu, para que uma parte de um gradiente seja vista no gráfico, sua parada deve estar dentro ou em 0...1. Cores abaixo de 0 ou acima de 1 não serão vistas ou serão apenas parcialmente vistas. O que precisamos fazer é pegar suas paradas e mapeá-las para um intervalo maior que 0...1, com base no máximo e no mínimo das marcas de linha.

Para começar, precisamos tirar seus stops da forma 0...1 e, em vez disso, ter uma representação 50...210. Isso é simplesmente pegar (210 - 50) * stop_value(ex: blue_stop = (210 - 50) * 0,16) ~= 75). Optei por arredondar todos os valores para simplificar.

Com esses valores, apenas os mapeamos para o intervalo desenhado do seu gráfico. O intervalo sorteado é mínimo_y...máximo_y. Abaixo está uma função que ajudará a mapear de um intervalo para outro.

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
}

Agora que temos nossos valores a serem mapeados e uma função para mapeá-los. Podemos gerar dinamicamente as paradas quando carregamos o gráfico. Abaixo está uma função para gerar paradas.

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
}

Usando generateStopspodemos atualizar a visualização original para obter um gradiente que seja sempre preciso em relação aos pontos de dados. Observe que algumas coisas foram alteradas em relação ao original para acomodar o exemplo.

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)
        })
    }
}