iOS - 折线图

前几天项目需求要做折线图，简单的搞了一下，正好做个demo给小伙伴们一起搞搞。

这次先上图再上代码

直接上代码了，功能简单，注释写好了

//
//  ViewController.m
//  cccc
//
//  Created by 司小文 on 2017/12/22.
//  Copyright © 2017年 司小文. All rights reserved.
//

#import "ViewController.h"

#define viewH 300 //view的高度

#define moveStartX 60//起始点的X轴
#define moveW 60//每个点的间隔
#define bottomH 30//轴焦点距离底的高度

#define BACKCOLOR   [UIColor colorWithRed:(float)(238/255.0f)green:(float)(237/255.0f)blue:(float)(238/255.0f)alpha:1]
#define LINECOLOR [UIColor colorWithRed:(float)(255/255.0f)green:(float)(103/255.0f)blue:(float)(149/255.0f)alpha:1]
#define LIGHTGREY [UIColor colorWithRed:(float)(183/255.0f)green:(float)(183/255.0f)blue:(float)(183/255.0f)alpha:1]

//#define moveStartX 60//每个点的间隔

@interface ViewController (){
    UIView *viewDown;
    UILabel *lab_Show;//展示lab
}
@property (nonatomic,strong)NSMutableArray *arr_Vertical;//垂直边数据
@property (nonatomic,strong)NSMutableArray *arr_HorizontalLine;//横线边数据
@property (nonatomic,strong)NSMutableArray *arr_Coordinates;//坐标数据

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _arr_Vertical = [NSMutableArray arrayWithArray:@[@"5",@"4",@"3",@"5",@"1"]];
    _arr_HorizontalLine = [NSMutableArray arrayWithArray:@[@"11.01",@"11.02",@"11.03",@"11.04",@"11.05"]];
    _arr_Coordinates = [NSMutableArray arrayWithArray:@[@"20",@"60",@"40",@"120",@"100"]];
    
    [self makeDraw];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)makeDraw{
    float lineW = 0;//线的总体长度
    float  moveStartY = viewH - bottomH;//起始点的Y轴
    float  verticalH = (moveStartY - 50)/5;//垂直高度间隔

    //底
    viewDown = [[UIView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, viewH)];
    viewDown.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:viewDown];
    
    //垂直边框，且构建层级
    for (int i = 0; i<_arr_Vertical.count; i++) {
        UILabel *lab = [[UILabel alloc] initWithFrame:CGRectMake(0,50+verticalH*i, moveStartX, verticalH)];
        lab.text = _arr_Vertical[i];
        lab.font = [UIFont systemFontOfSize:14.f];
        lab.textAlignment = NSTextAlignmentCenter;
        lab.textColor = LIGHTGREY;
        [viewDown addSubview:lab];
    }
    
    //画横线边框，且构建层级
    for (int i = 0; i<_arr_HorizontalLine.count; i++) {
        UILabel *lab = [[UILabel alloc] initWithFrame:CGRectMake(moveStartX - moveStartX/2 + moveStartX*i,moveStartY, moveStartX, bottomH)];
        lab.text = _arr_HorizontalLine[i];
        lab.font = [UIFont systemFontOfSize:14.f];
        lab.textAlignment = NSTextAlignmentCenter;
        lab.textColor = LIGHTGREY;
        [viewDown addSubview:lab];
    }
    
    //划线模型
    UIBezierPath *aPath = [UIBezierPath bezierPath];//填充镀层
    UIBezierPath *aPathLine = [UIBezierPath bezierPath];//线

    //开始的坐标点
    [aPath moveToPoint:CGPointMake(moveStartX,moveStartY)];
    [aPathLine moveToPoint:CGPointMake(moveStartX,moveStartY)];

    //所有经过的坐标点，画线
    for (int i = 0; i<_arr_Coordinates.count; i++) {
        [aPath addLineToPoint:CGPointMake(moveStartX+i*moveW, moveStartY - [_arr_Coordinates[i] intValue])];
        [aPathLine addLineToPoint:CGPointMake(moveStartX+i*moveW, moveStartY - [_arr_Coordinates[i] intValue])];
    }
    //获取总共的长度
    lineW = moveStartX+(_arr_Coordinates.count-1)*moveW;
    //收边
    [aPath addLineToPoint:CGPointMake(lineW,moveStartY)];
    [aPath closePath];
    
    CAShapeLayer *shapelayer = [CAShapeLayer layer];
    //设置边框颜色，就是上边画的，线的颜色
    shapelayer.strokeColor = [BACKCOLOR CGColor];
    //设置填充颜色 如果不需要[UIColor ClearColor]
    shapelayer.fillColor = [BACKCOLOR CGColor];
    //就是这句话在关联彼此（UIBezierPath和CAShapeLayer）：
    shapelayer.path = aPath.CGPath;
    [viewDown.layer addSublayer:shapelayer];
    
    //折线
    CAShapeLayer *shapelayerLine = [CAShapeLayer layer];
    //设置边框颜色，就是上边画的，线的颜色
    shapelayerLine.strokeColor = [LINECOLOR CGColor];
    //设置填充颜色 如果不需要[UIColor clearColor]
    shapelayerLine.fillColor = [[UIColor clearColor]CGColor];
    //就是这句话在关联彼此（UIBezierPath和CAShapeLayer）：
    shapelayerLine.path = aPathLine.CGPath;
    [viewDown.layer addSublayer:shapelayerLine];
    
    //垂直线
    UIBezierPath *aPathV = [UIBezierPath bezierPath];
    [aPathV moveToPoint:CGPointMake(moveStartX,50)];
    [aPathV addLineToPoint:CGPointMake(moveStartX, moveStartY)];
    [aPathV closePath];
    CAShapeLayer *shapelayerV = [CAShapeLayer layer];
    shapelayerV.strokeColor = [BACKCOLOR CGColor];
    shapelayerV.path = aPathV.CGPath;
    [viewDown.layer addSublayer:shapelayerV];
    
    //横线
    UIBezierPath *aPathH = [UIBezierPath bezierPath];
    [aPathH moveToPoint:CGPointMake(moveStartX,moveStartY)];
    //所有经过的坐标点，画线
    for (int i = 0; i<_arr_Coordinates.count; i++) {
        [aPath addLineToPoint:CGPointMake(moveStartX+i*moveW, moveStartY - [_arr_Coordinates[i] intValue])];
    }
    [aPathH addLineToPoint:CGPointMake(lineW+50, moveStartY)];
    [aPathH closePath];
    CAShapeLayer *shapelayerH = [CAShapeLayer layer];
    shapelayerH.strokeColor = [BACKCOLOR CGColor];
    shapelayerH.path = aPathH.CGPath;
    [viewDown.layer addSublayer:shapelayerH];
    
    //按钮,点击按钮改变数值
    for (int i = 0; i<_arr_HorizontalLine.count; i++) {
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        btn.frame = CGRectMake(moveStartX - moveStartX/2 + moveStartX*i, 0, moveStartX, moveStartY+30);
        btn.backgroundColor = [UIColor clearColor];
        [btn addTarget:self action:@selector(btnDonw:) forControlEvents:UIControlEventTouchUpInside];
        btn.tag = 100+i;
        [viewDown addSubview:btn];
        
        if (lab_Show == nil) {
            lab_Show = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, moveStartX, bottomH)];
            lab_Show.backgroundColor = LINECOLOR;
            lab_Show.textColor = [UIColor whiteColor];
            lab_Show.font = [UIFont systemFontOfSize:14.f];
            lab_Show.text = _arr_Coordinates[i];
            lab_Show.textAlignment = NSTextAlignmentCenter;
            lab_Show.layer.cornerRadius = 4;//弧度
            lab_Show.layer.masksToBounds = YES;//是否开启弧度

//            lab_Show.adjustsFontSizeToFitWidth = YES;
            [btn addSubview:lab_Show];
        }
    }
}

- (void)btnDonw:(UIButton*)btn{
    NSLog(@"%d",btn.tag);
    lab_Show.text = _arr_Coordinates[btn.tag - 100];
    [btn addSubview:lab_Show];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

继续- Demo下载地址

链接: https://pan.baidu.com/s/1nvsuOit 密码: tst5

感谢观看，学以致用更感谢~