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折线图代码