前几天项目需求要做折线图，简单的搞了一下，正好做个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
感谢观看，学以致用更感谢~