毕竟笔者是OC出身，用OC写起来比较快，Swift现在还不够稳定，所以这个demo就没用Swift去写，如果写两份的话，工程量也比较大，笔者也只是心血来潮去写的。先看下效果图把。
折线图是画在一个scrollview上的，因为考虑到，这个手机屏幕小，咱们的数据又大，显示不开，所以放到scrollview上，数据多的时候，可以滑动。
由于小弟能力有限，所以这个demo，能封装的，我已经尽力封装了，当然不可能满足所有开发者的需求，十个人能有三个人，能直接用这个代码，我就已经很满足了。
还是那句话，代码是开源的，各位可以自己修改，也就相当于给各位提供个思路吧。
有人可能认为，做这个折线图，需要用Quartz2D，而且很熟练，其实，肯定是要用Quartz2D，但是不需要你很熟练，只要会一些简单的划线画圆的方法就行了。最终实现就行。
1，主视图
自定义视图.h
@interface ZYLineScroView : UIScrollView
//x比例 10:1
@property (nonatomic, strong) NSString *xPropoertion;
//y比例 10:1
@property (nonatomic, strong) NSString *yPropoertion;
//x数据
@property (nonatomic, strong) NSArray *xArray;
//y数据
@property (nonatomic, strong) NSArray *yArray;
@end
视图集成UIScrollView，定义四个属性，x轴比例，y轴比例，x轴数据，y轴数据。
自定义视图.m
创建x轴和y轴视图
//xlineview
- (void)creatXlineView{
XlineView *xv = [[XlineView alloc] initWithFrame:CGRectMake(0, 0, 20, 0) withXpropertion:_xPropoertion xArray:_xArray];
[self addSubview:xv];
xv.tag = 2001;
self.contentSize = CGSizeMake(xv.bounds.size.width, self.contentSize.height);
if ([self viewWithTag:2002]) {
[self creatPointAndLine];
}
}
//ylineview
- (void)creatYlineView{
YlineView *yv = [[YlineView alloc] initWithFrame:CGRectMake(20, 0, 20, 0) withYpropertion:_yPropoertion yArray:_yArray];
[self addSubview:yv];
yv.tag = 2002;
self.contentSize = CGSizeMake(self.contentSize.width, yv.bounds.size.height);
if ([self viewWithTag:2001]) {
[self creatPointAndLine];
}
}
调整x轴视图的位置
- (void)layoutSubviews{
[super layoutSubviews];
dispatch_async(dispatch_get_main_queue(), ^{
UIView *xv = [self viewWithTag:2001];
xv.frame = CGRectMake(xv.frame.origin.x, self.contentSize.height-20, xv.bounds.size.width, 20);
});
}
在视图上画各个点
- (void)creatPointAndLine{
if (_yArray.count != _xArray.count) {
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"x和y的数组不一致" message:nil delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
[alert show];
return;
}
XlineView *xView = [self viewWithTag:2001];
YlineView *yview = [self viewWithTag:2002];
pointArray = [[NSMutableArray alloc] init];
//画点
for (int i = 0; i < _yArray.count; i ++) {
float x = [xView.xArray[i] floatValue] + xView.frame.origin.x;
float y = [yview.yArray[i] floatValue] + yview.frame.origin.y;
UIView *pointView = [[UIView alloc] initWithFrame:CGRectMake(x, y, 4, 4)];
pointView.center = CGPointMake(x, y);
pointView.backgroundColor = [UIColor blackColor];
pointView.layer.cornerRadius = 2;
pointView.layer.masksToBounds = YES;
[self addSubview:pointView];
[pointArray addObject:[NSValue valueWithCGPoint:CGPointMake(x, y)]];
}
[self setNeedsDisplay];
}
划折线到视图上
- (void)drawRect:(CGRect)rect{
[super drawRect:rect];
XlineView *xView = [self viewWithTag:2001];
YlineView *yview = [self viewWithTag:2002];
CGPoint p1;
CGPoint p2;
for (int i = 0; i < pointArray.count; i ++) {
p2 = [pointArray[i] CGPointValue];
if (i == 0) {
p1 = CGPointMake(xView.frame.origin.x,yview.bounds.size.height+yview.frame.origin.y);
}else{
p1 = [pointArray[i - 1] CGPointValue];
}
//获取当前上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//移动某一点
CGContextMoveToPoint(context, p1.x, p1.y);
//移动某一点到某一点，绘制一条线
CGContextAddLineToPoint(context, p2.x, p2.y);
CGContextStrokePath(context);
}
}
@end
2,辅助视图
即，x轴和y轴上的视图，对，我不是画的，我是直接用的视图。
x轴.h
//返回点的x坐标，用于确定视图上点的x轴的位置
@property (nonatomic, strong) NSMutableArray *xArray;
- (id)initWithFrame:(CGRect)frame withXpropertion:(NSString *)xp xArray:(NSArray *)xArray;
x轴.m
创建x轴上的内容，各个点，和数字
- (void)getViewBoundsWithxp:(NSString *)xp xArray:(NSArray *)xArray{
_xArray = [[NSMutableArray alloc] init];
NSArray *xpArray = [xp componentsSeparatedByString:@":"];
float width = [xArray.lastObject floatValue]/[xpArray.firstObject floatValue] * [xpArray.lastObject floatValue];
width = width+28;
self.frame = CGRectMake(18, 0, width, 20);
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 2, width, 2)];
lineView.backgroundColor = [UIColor blackColor];
[self addSubview:lineView];
//创建竖线和lable
for (int i = 0; i < xArray.count; i ++) {
float x = [xArray[i] floatValue];
UIView *sVIew = [[UIView alloc] initWithFrame:CGRectMake(x/[xpArray.firstObject floatValue] * [xpArray.lastObject floatValue], 0, 1, 2)];
sVIew.backgroundColor = [UIColor blackColor];
[self addSubview:sVIew];
UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, width/xArray.count, 16)];
textLabel.textAlignment = NSTextAlignmentCenter;
textLabel.font = [UIFont systemFontOfSize:10];
textLabel.text = xArray[i];
textLabel.center = CGPointMake(sVIew.center.x, 12);
[self addSubview:textLabel];
[_xArray addObject:[NSString stringWithFormat:@"%.2f",sVIew.center.x]];
}
}
y轴.h
//返回点的y坐标，用于确定视图上点的y轴的位置
@property (nonatomic, strong) NSMutableArray *yArray;
- (id)initWithFrame:(CGRect)frame withYpropertion:(NSString *)yp yArray:(NSArray *)yArray;
y轴.m
创建y轴上坐标点和数字
- (void)getViewBoundsWithyp:(NSString *)yp yArray:(NSArray *)yArray{
_yArray = [[NSMutableArray alloc] init];
NSArray *ypArray = [yp componentsSeparatedByString:@":"];
float height = [yArray.lastObject floatValue]/[yArray.firstObject floatValue] * [ypArray.lastObject floatValue];
height = height+26;
self.frame = CGRectMake(0, -16, 20, height);
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(16, 0, 2, height)];
lineView.backgroundColor = [UIColor blackColor];
[self addSubview:lineView];
//创建竖线和lable
for (int i = 0; i < yArray.count; i ++) {
float y = [yArray[i] floatValue];
UIView *sVIew = [[UIView alloc] initWithFrame:CGRectMake(18,height - y/[ypArray.firstObject floatValue] * [ypArray.lastObject floatValue], 2, 1)];
sVIew.backgroundColor = [UIColor blackColor];
[self addSubview:sVIew];
UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 16,height/yArray.count)];
textLabel.numberOfLines = 0;
textLabel.textAlignment = NSTextAlignmentCenter;
textLabel.font = [UIFont systemFontOfSize:10];
textLabel.text = yArray[i];
textLabel.center = CGPointMake(8, sVIew.center.y);
[self addSubview:textLabel];
[_yArray addObject:[NSString stringWithFormat:@"%.2f",sVIew.center.y]];
}
}
3，使用方式
ZYLineScroView *lView = [[ZYLineScroView alloc] initWithFrame:CGRectMake(10, 100, 300, 300)];
[self.view addSubview:lView];
lView.xPropoertion = @"1:30";
lView.xArray = @[@"1",@"2",@"3",@"4",@"5",@"6"];
lView.yPropoertion = @"100:40";
lView.yArray = @[@"100",@"150",@"300",@"400",@"500",@"600"];
