在 iOS 中创建带有渐变的折线图

Question

在 iOS 中创建这样的图表的最佳方法是什么？

我的第一个想法是创建一条贝塞尔曲线路径，然后添加具有不同位置的渐变层。但这是行不通的，因为文档指定：

这些值必须单调递增。

我的图表中情况并非如此。

关于实现这一目标的好方法有什么想法吗？

谢谢

Answer 1

您可以通过使用 aCAGradientLayer作为图表的背景，然后使用 aCAShapeLayer作为渐变层的蒙版来实现此目的。遮罩层将仅显示其绘制区域下方的图层。

这个游乐场代码使用随机生成的数据给出了一个总体思路：

import UIKit
import PlaygroundSupport

let view = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
view.backgroundColor = .black

// Gradient for the chart colors
let gradient = CAGradientLayer()
gradient.colors = [
    UIColor.red.cgColor,
    UIColor.orange.cgColor,
    UIColor.yellow.cgColor,
    UIColor.green.cgColor
]
gradient.startPoint = CGPoint(x: 0.5, y: 0)
gradient.endPoint = CGPoint(x: 0.5, y: 1)

gradient.frame = view.bounds
view.layer.addSublayer(gradient)

// Random points
let graph = CAShapeLayer()
let path = CGMutablePath()
var y: CGFloat = 150
let points: [CGPoint] = stride(from: CGFloat.zero, to: 300, by: 2).map {
    let change = CGFloat.random(in: -20...20)
    var newY = y + change
    newY = max(10, newY)
    newY = min(newY, 300)
    y = newY
    return CGPoint(x: $0, y: y)
}
path.addLines(between: points)
graph.path = path
graph.fillColor = nil
graph.strokeColor = UIColor.black.cgColor
graph.lineWidth = 4
graph.lineJoin = .round
graph.frame = view.bounds

// Only show the gradient where the line is
gradient.mask = graph

PlaygroundPage.current.liveView = view

结果：