CALayer繪製折線圖

calyer現在逐漸熟練，折線圖的繪製有好幾種，最常見的是CGContextRef和CALayer。

CGContextRef跟CALayer流程差不多，今天就簡單把折線圖的流程總結下。

第一步：畫出座標軸（沒有箭頭）。效果圖如下：

-(void)drawAxes
{
    //起點
    CGPoint startP = CGPointMake(20, 80);
    //座標軸的拐點
    CGPoint axesP = CGPointMake(20, self.view.frame.size.height - 80);
    //終點
    CGPoint endP = CGPointMake(self.view.frame.size.width - 20, self.view.frame.size.height - 80);


}

第二步：給座標軸X、Y軸設定單位，相當於刻度
效果圖如下：

-(void)drawLineX
{
    NSInteger month = 12;
    CGFloat oneth = (self.view.frame.size.width - 40) / 12;
    for (NSInteger i=0; i<month; i++) {
        UILabel *monthLable = [UILabel new];
        monthLable.frame = CGRectMake(20+oneth*i, self.view.frame.size.height - 75, oneth, 20);
        monthLable.font = [UIFont fontWithName:@"Arial Rounded MT Bold" size:8];
        monthLable.backgroundColor = [UIColor clearColor];
        monthLable.textColor = [UIColor blackColor];
        monthLable.text = [NSString stringWithFormat:@"%ld月",i+1];
        monthLable.transform = CGAffineTransformMakeRotation(M_PI * 0.3);
        [self.view addSubview:monthLable];
    }

}
-(void)drawLineY
{
    NSInteger month = 20;
    CGFloat oneth = (self.view.frame.size.height - 160) / 20;
    for (NSInteger i=month; i>0; i--) {
        UILabel *degreeLable = [UILabel new];
        degreeLable.frame = CGRectMake(0,70 + (oneth *i), 20, oneth);
        degreeLable.font = [UIFont fontWithName:@"MarkerFelt-Thin" size:8];
        degreeLable.backgroundColor = [UIColor clearColor];
        degreeLable.textAlignment = NSTextAlignmentCenter;
        degreeLable.textColor = [UIColor blackColor];
        degreeLable.numberOfLines = 0;
        degreeLable.text = [NSString stringWithFormat:@"%ld度",(15-i)*3];
        [self.view addSubview:degreeLable];
    }

}

第三步：繪畫出座標軸的背景(這一步純粹是爲了美觀)；效果圖如下：

-(void)makeUpgradedBedding
{
    CAGradientLayer *graditLayer = [CAGradientLayer layer];
    graditLayer.frame = CGRectMake(23, 77, self.view.frame.size.width - 40, self.view.frame.size.height - 160);


}

第四步：繪畫出虛線：即每一個單位刻度的對應高度的虛線；效果圖如下：

-(void)makeUpDashLine
{
    NSInteger month = 19;
    CGFloat oneth = (self.view.frame.size.height - 160) / 20;
    for (NSInteger i=month; i>0; i--) {
        //起點
        CGPoint startP = CGPointMake(22, 80 + (oneth *i));
        //終點
        CGPoint endP = CGPointMake(self.view.frame.size.width - 20, 80 + (oneth *i));

    }
}

第五步：畫出折線圖，最後終於要上大頭戲了。效果圖如下：

- (void)dravLine
{
    CGFloat oneheight = (self.view.frame.size.height - 160) / 12;
    CGFloat onewidth = (self.view.frame.size.width - 40) / 12;
    //十二個月的座標
    CGPoint JanuaryPoint = CGPointMake(22, self.view.frame.size.height - 80);
    CGPoint FebruaryPoint = CGPointMake(22+onewidth, self.view.frame.size.height - 80-oneheight);
    CGPoint MarchPoint = CGPointMake(22+onewidth *2, self.view.frame.size.height - 80-oneheight*7);
    CGPoint AprilPoint = CGPointMake(22+onewidth*3, self.view.frame.size.height - 80-oneheight*4);
    CGPoint MayPoint = CGPointMake(22+onewidth*4, self.view.frame.size.height - 80-oneheight*10);
    CGPoint JunePoint = CGPointMake(22+onewidth*5, self.view.frame.size.height - 80-oneheight*7);
    CGPoint JulyPoint = CGPointMake(22+onewidth*6, self.view.frame.size.height - 80-oneheight*6);
    CGPoint AugustPoint = CGPointMake(22+onewidth*7, self.view.frame.size.height - 80-oneheight*9);
    CGPoint SeptemberPoint = CGPointMake(22+onewidth*8, self.view.frame.size.height - 80-oneheight*8);
    CGPoint OctoberPoint = CGPointMake(22+onewidth*9, self.view.frame.size.height - 80-oneheight*10);
    CGPoint NovemberPoint = CGPointMake(22+onewidth*10, self.view.frame.size.height - 80-oneheight*9);
    CGPoint DecemberPoint = CGPointMake(22+onewidth*11, self.view.frame.size.height - 80-oneheight);
    //下面的這塊代碼實現折線走勢


}

以上就是完成折線圖的所有代碼，完全是按照CALayer利用UIBezierPath寫的。
代碼部分不太全，如果想要下載的可以去我的資源庫下載.m文件。下載CALayer折線圖代碼