在iOS中如何实现带渐变效果的折线图？

你之前尝试的直接给贝塞尔路径附加渐变层的思路确实受系统限制无法实现：CAGradientLayer的locations属性要求必须沿渐变轴单调递增，无法适配任意弯折的折线路径的渐变需求，以下是三个可落地的实现方案，你可以根据自己的业务场景选择：

• 方案1：CAShapeLayer遮罩 + 渐变层组合（实现成本最低，绝大多数场景的最优选择）
  适用场景：渐变沿全局X轴/Y轴方向分布（比如折线越高颜色越红，越靠右颜色越深等通用需求）
  实现步骤：

  1. 根据折线坐标点生成完整的贝塞尔路径，设置好对应的线宽、端点圆角、折角圆角等描边属性
  2. 初始化CAShapeLayer实例，将其path属性设置为上述贝塞尔路径，fillColor设为nil，strokeColor设为任意不透明颜色
  3. 初始化CAGradientLayer，大小和折线图画布保持一致，配置你需要的渐变色组、渐变方向和对应位置参数
  4. 将CAShapeLayer赋值给CAGradientLayer的mask属性，最后把渐变层添加到视图层级即可
     这个方案全部用系统原生API实现，性能优异，自动抗锯齿，不需要手动处理绘制逻辑。

• 方案2：Core Graphics手动绘制（灵活度最高，支持沿折线走向的渐变）
  适用场景：需要渐变完全贴合折线走向（比如从折线起点到终点线性渐变，不受折线弯折影响的需求）
  实现步骤：

  1. 在视图的draw(_ rect: CGRect)方法或者自定义图形上下文内生成折线的贝塞尔路径
  2. 调用路径的addClip()方法将当前路径设置为裁剪区域，后续所有绘制操作只会在路径范围内生效
  3. 用CGGradient创建自定义渐变，通过CGContextDrawLinearGradient等方法沿你需要的方向绘制即可
     这个方案完全不受系统layer的规则限制，可以实现任意自定义的渐变效果，只需注意高频刷新场景下的性能优化即可。

• 方案3：使用成熟第三方图表库（开发效率最高）
  适用场景：项目允许引入第三方依赖，且需要配套的交互、统计等附加图表能力
  主流的iOS图表库都已经封装好了渐变折线图的实现，直接配置对应的参数即可生效，不需要自行开发绘制逻辑。

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