淘先锋技术网

首页 1 2 3 4 5 6 7

CALayer绘制折线图

calyer现在逐渐熟练，折线图的绘制有好几种，最常见的是CGContextRef和CALayer。

CGContextRef跟CALayer流程差不多，今天就简单把折线图的流程总结下。

第一步：画出坐标轴（没有箭头）。效果图如下：
坐标轴效果

-(void)drawAxes
{
    //起点
    CGPoint startP = CGPointMake(, );
    //坐标轴的拐点
    CGPoint axesP = CGPointMake(, self.view.frame.size.height - );
    //终点
    CGPoint endP = CGPointMake(self.view.frame.size.width - , self.view.frame.size.height - );


}

第二步：给坐标轴X、Y轴设定单位，相当于刻度
效果图如下：
刻度单位

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

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

}

第三步：绘画出坐标轴的背景(这一步纯粹是为了美观)；效果图如下：
背景颜色

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


}

第四步：绘画出虚线：即每一个单位刻度的对应高度的虚线；效果图如下：
虚线刻度

-(void)makeUpDashLine
{
    NSInteger month = ;
    CGFloat oneth = (self.view.frame.size.height - ) / ;
    for (NSInteger i=month; i>; i--) {
        //起点
        CGPoint startP = CGPointMake(,  + (oneth *i));
        //终点
        CGPoint endP = CGPointMake(self.view.frame.size.width - ,  + (oneth *i));

    }
}

第五步：画出折线图，最后终于要上大头戏了。效果图如下：
折线效果图

- (void)dravLine
{
    CGFloat oneheight = (self.view.frame.size.height - ) / ;
    CGFloat onewidth = (self.view.frame.size.width - ) / ;
    //十二个月的坐标
    CGPoint JanuaryPoint = CGPointMake(, self.view.frame.size.height - );
    CGPoint FebruaryPoint = CGPointMake(+onewidth, self.view.frame.size.height - -oneheight);
    CGPoint MarchPoint = CGPointMake(+onewidth *, self.view.frame.size.height - -oneheight*);
    CGPoint AprilPoint = CGPointMake(+onewidth*, self.view.frame.size.height - -oneheight*);
    CGPoint MayPoint = CGPointMake(+onewidth*, self.view.frame.size.height - -oneheight*);
    CGPoint JunePoint = CGPointMake(+onewidth*, self.view.frame.size.height - -oneheight*);
    CGPoint JulyPoint = CGPointMake(+onewidth*, self.view.frame.size.height - -oneheight*);
    CGPoint AugustPoint = CGPointMake(+onewidth*, self.view.frame.size.height - -oneheight*);
    CGPoint SeptemberPoint = CGPointMake(+onewidth*, self.view.frame.size.height - -oneheight*);
    CGPoint OctoberPoint = CGPointMake(+onewidth*, self.view.frame.size.height - -oneheight*);
    CGPoint NovemberPoint = CGPointMake(+onewidth*, self.view.frame.size.height - -oneheight*);
    CGPoint DecemberPoint = CGPointMake(+onewidth*, self.view.frame.size.height - -oneheight);
    //下面的这块代码实现折线走势


}

以上就是完成折线图的所有代码，完全是按照CALayer利用UIBezierPath写的。
代码部分不太全，如果想要下载的可以去我的资源库下载.m文件。下载CALayer折线图代码