畢竟筆者是OC出身蜂厅，用OC寫起來比較快愉择，Swift現(xiàn)在還不夠穩(wěn)定劫乱，所以這個demo就沒用Swift去寫，如果寫兩份的話锥涕，工程量也比較大要拂，筆者也只是心血來潮去寫的。先看下效果圖把站楚。
折線圖是畫在一個scrollview上的脱惰，因為考慮到，這個手機屏幕小窿春，咱們的數(shù)據(jù)又大拉一，顯示不開，所以放到scrollview上旧乞，數(shù)據(jù)多的時候蔚润，可以滑動。
由于小弟能力有限尺栖，所以這個demo嫡纠，能封裝的，我已經(jīng)盡力封裝了延赌，當然不可能滿足所有開發(fā)者的需求除盏，十個人能有三個人，能直接用這個代碼挫以，我就已經(jīng)很滿足了者蠕。
還是那句話，代碼是開源的掐松，各位可以自己修改踱侣，也就相當于給各位提供個思路吧。
有人可能認為大磺，做這個折線圖抡句，需要用Quartz2D，而且很熟練杠愧，其實待榔，肯定是要用Quartz2D，但是不需要你很熟練殴蹄，只要會一些簡單的劃線畫圓的方法就行了究抓。最終實現(xiàn)就行猾担。
1袭灯，主視圖
自定義視圖.h
@interface ZYLineScroView : UIScrollView
//x比例 10:1
@property (nonatomic, strong) NSString *xPropoertion;
//y比例 10:1
@property (nonatomic, strong) NSString *yPropoertion;
//x數(shù)據(jù)
@property (nonatomic, strong) NSArray *xArray;
//y數(shù)據(jù)
@property (nonatomic, strong) NSArray *yArray;
@end
視圖集成UIScrollView刺下，定義四個屬性，x軸比例稽荧，y軸比例橘茉，x軸數(shù)據(jù)，y軸數(shù)據(jù)姨丈。
自定義視圖.m
創(chuàng)建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];
}
}
調(diào)整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的數(shù)組不一致" 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
創(chuàng)建x軸上的內(nèi)容，各個點沐绒，和數(shù)字
- (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];
//創(chuàng)建豎線和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
創(chuàng)建y軸上坐標點和數(shù)字
- (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];
//創(chuàng)建豎線和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"];
