[英]Make Line chart gradient color go from line to bottom - SwiftUI
I am trying to make it so the line chart display a gradient color from the line and down but I can't seem to get it to only go from the line.我正在尝试使折线图从线条和向下显示渐变颜色,但我似乎无法从线条中仅将其变为 go。 Instead it just fills the whole background in the given frame.
相反,它只是填充给定帧中的整个背景。
I have this - Graph current我有这个 -图表电流
But I would like this - Graph wanted但我想要这个 -图表想要
import SwiftUI
struct Graph: View {
var body: some View {
ZStack{
LineGraph(dataPoints: [1, 0.8, 0.7, 0.5, 0.7, 0.4, 0.5, 0.6, 0.8, 0.4, 0.3, 0.4, 0.5, 0.7, 0.6, 1])
.stroke(Color(#colorLiteral(red: 0.2784313725, green: 0.2901960784, blue: 0.9568627451, alpha: 1)), lineWidth: 2)
}
.frame(width: 124, height: 90, alignment: .center)
.background(LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.4901960784, green: 0.5058823529, blue: 0.9803921569, alpha: 1)), Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1))]), startPoint: .top, endPoint: .bottom))
}
}
struct LineGraph: Shape {
var dataPoints: [CGFloat]
func path(in rect: CGRect) -> Path {
func point(at ix: Int) -> CGPoint {
let point = dataPoints[ix]
let x = rect.width * CGFloat(ix) / CGFloat(dataPoints.count - 1)
let y = (1 - point) * rect.height
return CGPoint(x: x, y: y)
}
return Path { p in
guard dataPoints.count > 1 else {return}
let start = dataPoints[0]
p.move(to: CGPoint(x: 0, y: (1 - start) * rect.height))
for index in dataPoints.indices {
p.addLine(to: point(at: index))
}
}
}
}
Here is possible solution - use same graph for clipped background (we need closed path for that) and another variant for stroked line.这是可能的解决方案 - 对裁剪的背景使用相同的图形(我们需要封闭路径)和描边线的另一个变体。
Prepared with Xcode 12.4 / iOS 14.4用 Xcode 12.4 / iOS 14.4 制备
struct Graph: View {
let dataPoints: [CGFloat] = [1, 0.8, 0.7, 0.5, 0.7, 0.4, 0.5, 0.6, 0.8, 0.4, 0.3, 0.4, 0.5, 0.7, 0.6, 1]
var body: some View {
ZStack{
LinearGradient(gradient:
Gradient(colors: [Color(#colorLiteral(red: 0.4901960784, green: 0.5058823529, blue: 0.9803921569, alpha: 1)), Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1))]), startPoint: .top, endPoint: .bottom)
.clipShape(LineGraph(dataPoints: dataPoints, closed: true)) // << !!
LineGraph(dataPoints: dataPoints)
.stroke(Color(#colorLiteral(red: 0.2784313725, green: 0.2901960784, blue: 0.9568627451, alpha: 1)), lineWidth: 2)
}
.frame(width: 124, height: 90, alignment: .center)
}
}
struct LineGraph: Shape {
var dataPoints: [CGFloat]
var closed = false // << indicator for variants !!
func path(in rect: CGRect) -> Path {
func point(at ix: Int) -> CGPoint {
let point = dataPoints[ix]
let x = rect.width * CGFloat(ix) / CGFloat(dataPoints.count - 1)
let y = (1 - point) * rect.height
return CGPoint(x: x, y: y)
}
return Path { p in
guard dataPoints.count > 1 else {return}
let start = dataPoints[0]
p.move(to: CGPoint(x: 0, y: (1 - start) * rect.height))
for index in dataPoints.indices {
p.addLine(to: point(at: index))
}
if closed { // << variant for clipping !!
p.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
p.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
p.closeSubpath()
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.