iOS 繪制漂亮的折線圖

效果圖是這樣的：

關鍵是在

基本策略 是描點 和 連線。

折線基礎版本，我找到網上的第三方，UUChart 。 特點是朴素，簡單，擴展性強。

效果圖重點是在折線要有陰影，於是 重點 放在 折線發散的陰影 和 拆解第三方 整理出符合需求的面向對象良好的折線模型。

 一 拆解：

 分三個文件 HFChart,HFChartLineView,HFChartConst

HFChart : 折線視圖控制器角色  控制展示數值范圍，顏色，橫線 等 必要UI 元素展示規則

HFChartConst : 折線需要展示的一些靜態參數 比如 45設定為行間距 就可以設置在 Const 里面。

HFChartLine:  主要是實施繪制 描點 連線 和 繪制我們需要的陰影

二 陰影

  說是陰影，實際 是顏色的漸變。

（1）之前 思考方向  這個陰影 是兩點之間的連線 發散出來的， 就是這個執拗思路莫名把問題難度加大。因為 折線的若干個點，相鄰 每兩個點之間的連線都要有陰影 那么陰影方向？ 陰影重疊？ 等問題怎么解決？ 越想越復雜

（2）從顏色漸變考慮

     創建漸變圖層，根據折線點，mask遮罩區域，剩下的漸變圖層放在視圖背景圖上 就是陰影啦。有沒有一種豁然開朗的感覺？

   舉例子：

  (2.1)繪制漸變圖層：CAGradientLayer  是用來繪制漸變圖層的工具，作為關鍵字可以搜索到很多參考資料

    //實現背景漸變
    //初始化我們需要改變背景色的UIView，並添加在視圖上
    self.theView = [[UIView alloc] initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, self.view.hf_width)];
    [self.view addSubview:self.theView];
    //初始化CAGradientlayer對象，使它的大小為UIView的大小
    self.gradientLayer = [CAGradientLayer layer];
    self.gradientLayer.frame = self.theView.bounds;
    //將CAGradientlayer對象添加在我們要設置背景色的視圖的layer層
    [self.theView.layer addSublayer:self.gradientLayer];
    //設置漸變區域的起始和終止位置（范圍為0-1）
    //不設置默認從上到下漸變，如果使用startPoint endPoint 就是右下角對角線 方向漸變 也可以自定義方向
   // self.gradientLayer.startPoint = CGPointMake(0, 0);
   // self.gradientLayer.endPoint = CGPointMake(1, 1);
    //設置顏色數組(我寫的是白色的漸變)
    CGColorRef color1 = [UIColor colorWithWhite:1.000 alpha:0.7].CGColor;
    CGColorRef color2 = [UIColor colorWithWhite:1.000 alpha:0.0].CGColor;
    [_gradientLayer setColors:@[(__bridge id)color1,(__bridge id)color2]];//設置顏色分割點（范圍：0-1）
    self.gradientLayer.locations = @[@(0.0f), @(0.9f)];

效果圖如下：（為了看清楚 白色的漸變遮罩 我選擇了醒目的 紫色做背景色）

 

    (2.2) 在知道已知點集（有序點 折點順序）合添加遮罩方法

//給漸變層設置 mask 屬性
    {
        // 設置只顯示一個三角形范圍的漸變色
        UIBezierPath *shapeLayerPath = [[UIBezierPath alloc] init];
        // 點的坐標是相對於漸變層的
        [shapeLayerPath moveToPoint:CGPointMake(0,self.view.hf_width)];//第一個點
        [shapeLayerPath addLineToPoint:CGPointMake(self.view.hf_width/2, 0)];//第二個點
        [shapeLayerPath addLineToPoint:CGPointMake(self.view.hf_width, self.view.hf_width)];//第三個點
        CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        shapeLayer.path = shapeLayerPath.CGPath;
        self.gradientLayer.mask = shapeLayer; 
    }

效果圖：

 

三 剩下的就是組織自己的折線模型結構了 已經是很簡單了有沒有？

 整理HFChart HFChartConst HFChartLine 給 HFChartLine 添加遮罩 完成

參考 ：

1 . https://github.com/ZhipingYang/UUChartView

2.http://www.jb51.net/article/79948.htm