屏幕快照 2018-10-22 17.26.15.png
这个主要用到了两个类UIBezierPath和CAShapeLayer
首先创建一个继承与Controller类，暂且命名LineGraphView，并在其.m文件创建坐标轴
#define MAINSCREEN [UIScreen mainScreen].bounds
#import "LineGraphView.h"
#define LABLEX 50
@implementation LineGraphView
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
- (UIScrollView *)scrollView{
if (!_scrollView) {
UIScrollView *scroll = [[UIScrollView alloc]init];
scroll.frame = CGRectMake(20, 0, MAINSCREEN.size.width-20, 350);
scroll.delegate = self;
scroll.scrollEnabled = YES;
scroll.backgroundColor = [UIColor whiteColor];
scroll.showsVerticalScrollIndicator = YES;
scroll.showsHorizontalScrollIndicator = YES;
_scrollView = scroll;
}
return _scrollView;
}
- (instancetype)initWithFrame:(CGRect)frame{
if ([super initWithFrame:frame]) {
[self addScrollView];
[self createLabelX];
[self createLabelY];
[self addChart];
}
return self;
}
#pragma mark - 绘制滚动视图
- (void)addScrollView{
[self addSubview:self.scrollView];
self.userInteractionEnabled = YES;
_scrollView.contentSize = CGSizeMake(LABLEX*[self getNumberOfDaysInMonth],350);
NSLog(@"滚动视图 %@",_scrollView);
}
#pragma mark - 绘制横坐标
- (void)createLabelX{
CGFloat month = [self getNumberOfDaysInMonth];
for (NSInteger i = 0; i < month; i++) {
UILabel * LabelMonth = [[UILabel alloc]initWithFrame:CGRectMake(i*LABLEX+20,300,50,50)];
LabelMonth.tag = 1000 + i;
LabelMonth.textAlignment = 1;
LabelMonth.text = [NSString stringWithFormat:@"%ld",i+1];
LabelMonth.font = [UIFont systemFontOfSize:15];
LabelMonth.transform = CGAffineTransformMakeRotation(M_PI * 0.3);
[_scrollView addSubview:LabelMonth];
}
}
#pragma mark - 绘制纵坐标
- (void)createLabelY{
CGFloat Ydivision = 6;
for (NSInteger i = 0; i < Ydivision; i++) {
UILabel * labelYdivision = [[UILabel alloc]initWithFrame:CGRectMake(0,275-50*i,40,50)];
labelYdivision.tag = 2000 + i;
labelYdivision.textAlignment = 2;
labelYdivision.backgroundColor = [UIColor whiteColor];
labelYdivision.text = [NSString stringWithFormat:@"%ld",i*50];
labelYdivision.font = [UIFont systemFontOfSize:15];
[self addSubview:labelYdivision];
}
}
#pragma mark - 获得当月的天数
- (NSInteger)getNumberOfDaysInMonth
{
NSCalendar * calendar = [[NSCalendar alloc]initWithCalendarIdentifier:NSCalendarIdentifierGregorian]; // 指定日历的算法 NSGregorianCalendar - ios 8
NSDate * currentDate = [NSDate date];
NSRange range = [calendar rangeOfUnit:NSCalendarUnitDay inUnit:NSCalendarUnitMonth forDate:currentDate];
return range.length;
}
#pragma mark - 添加上面坐标轴
- (void)addChart{
_subView = [[LineChildView alloc]init];
_subView.frame = CGRectMake(20, 0, _scrollView.contentSize.width, _scrollView.frame.size.height-50);
[_scrollView addSubview:_subView];
[_subView createPoint:nil];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
NSLog(@"滑动了");
}
接下来创建折线子类
#import
@interface LineChildView : UIView
@property (nonatomic, strong) NSMutableArray *pointArray;
@property (nonatomic, strong) CAShapeLayer *lineChartLayer;
- (void)createPoint:(NSArray *)array;
@end
#import "LineChildView.h"
@implementation LineChildView
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
- (instancetype)init{
if ([super init]) {
self.backgroundColor = [UIColor whiteColor];
_pointArray = [NSMutableArray new];
}
return self;
}
- (void)drawRect:(CGRect)rect{
/*******画出坐标轴********/
CGFloat W = [self getNumberOfDaysInMonth]*50;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(10, 0)];
[path addLineToPoint:CGPointMake(10, 300)];
[path addLineToPoint:CGPointMake(W, 300)];
[path setLineWidth:1];
[[UIColor greenColor] set];
[path stroke];
// 两条不搭嘎的线,用两条路径
for (int i = 1; i<6; i++) {
UIBezierPath *path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointMake(10, 300-50*i)];
[path1 addLineToPoint:CGPointMake(W, 300-50*i)];
// 如果想实现两条线颜色不同等方法,分别写两次渲染即可
path1.lineWidth = 1;
[[UIColor lightGrayColor] set];
[path1 stroke];
}
}
#pragma mark - 获得当月的天数
- (NSInteger)getNumberOfDaysInMonth
{
NSCalendar * calendar = [[NSCalendar alloc]initWithCalendarIdentifier:NSCalendarIdentifierGregorian]; // 指定日历的算法 NSGregorianCalendar - ios 8
NSDate * currentDate = [NSDate date];
NSRange range = [calendar rangeOfUnit:NSCalendarUnitDay inUnit:NSCalendarUnitMonth forDate:currentDate];
return range.length;
}
- (void)createPoint:(NSArray *)array{
//创建折线的几个点
UIBezierPath *path1 = [UIBezierPath bezierPath];
for (int i = 0; i<20; i++) {
CGFloat x = i*50;
CGFloat y;
if (i>10) {
y = i*20;
}else{
y = 300-(i*30+10*2);
}
if (y<50){
y = 50;
}
if (y>300) {
y = 300;
}
if (i==0) {
[path1 moveToPoint:CGPointMake(x+15, y)];
}
[path1 addLineToPoint:CGPointMake(x+15, y)];
// 如果想实现两条线颜色不同等方法,分别写两次渲染即可
path1.lineWidth = 1;
[[UIColor lightGrayColor] set];
[path1 stroke];
}
//链接折线，填充颜色
self.lineChartLayer = [CAShapeLayer layer];
self.lineChartLayer.path = path1.CGPath;
self.lineChartLayer.strokeColor = [UIColorChange colorwithHexString:@"#00BFFF"].CGColor;
self.lineChartLayer.fillColor = [[UIColor clearColor] CGColor];
// 默认设置路径宽度为0，使其在起始状态下不显示
self.lineChartLayer.lineWidth = 2;
self.lineChartLayer.lineCap = kCALineCapRound;
self.lineChartLayer.lineJoin = kCALineJoinRound;
[self.layer addSublayer:self.lineChartLayer];
//在折线上面绘制圆圈
for (int i = 0; i<20; i++) {
CGFloat x = i*50;
CGFloat y;
if (i>10) {
y = i*20;;
}else{
y = 300-(i*30+10*2);
}
if (y<50){
y = 50;
}
if (y>300) {
y = 300;
}
//创建折线上面的圆圈,为防止被覆盖选择创建在图层最上面
UIView *circleView = [[UIView alloc]init];
circleView.backgroundColor = [UIColor whiteColor];
circleView.frame = CGRectMake(0, 0, 8, 8);
circleView.center = CGPointMake(x+15, y);
circleView.layer.borderColor = [UIColorChange colorwithHexString:@"#00BFFF"].CGColor;
circleView.layer.borderWidth = 2;
circleView.layer.cornerRadius = 4;
circleView.tag = i+100;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapCircle:)];
[circleView addGestureRecognizer:tap];
[self addSubview:circleView];
}
}
- (void)tapCircle:(UITapGestureRecognizer *)tap{
}
注：[UIColorChange colorwithHexString:@"#00BFFF"].CGColor;可以换成自己的颜色，此处是我定义的颜色转换器