畢竟筆者是OC出身，用OC寫起來比較快，Swift現(xiàn)在還不夠穩(wěn)定，所以這個(gè)demo就沒用Swift去寫，如果寫兩份的話，工程量也比較大，筆者也只是心血來潮去寫的。先看下效果圖把。
折線圖是畫在一個(gè)scrollview上的，因?yàn)榭紤]到，這個(gè)手機(jī)屏幕小，咱們的數(shù)據(jù)又大，顯示不開，所以放到scrollview上，數(shù)據(jù)多的時(shí)候，可以滑動(dòng)。
由于小弟能力有限，所以這個(gè)demo，能封裝的，我已經(jīng)盡力封裝了，當(dāng)然不可能滿足所有開發(fā)者的需求，十個(gè)人能有三個(gè)人，能直接用這個(gè)代碼，我就已經(jīng)很滿足了。
還是那句話，代碼是開源的，各位可以自己修改，也就相當(dāng)于給各位提供個(gè)思路吧。
有人可能認(rèn)為，做這個(gè)折線圖，需要用Quartz2D，而且很熟練，其實(shí)，肯定是要用Quartz2D，但是不需要你很熟練，只要會(huì)一些簡單的劃線畫圓的方法就行了。最終實(shí)現(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，定義四個(gè)屬性，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);
});
}
在視圖上畫各個(gè)點(diǎn)
- (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];
//畫點(diǎn)
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];
}
//獲取當(dāng)前上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//移動(dòng)某一點(diǎn)
CGContextMoveToPoint(context, p1.x, p1.y);
//移動(dòng)某一點(diǎn)到某一點(diǎn)，繪制一條線
CGContextAddLineToPoint(context, p2.x, p2.y);
CGContextStrokePath(context);
}
}
@end
2,輔助視圖
即，x軸和y軸上的視圖，對，我不是畫的，我是直接用的視圖。
x軸.h
//返回點(diǎn)的x坐標(biāo)，用于確定視圖上點(diǎn)的x軸的位置
@property (nonatomic, strong) NSMutableArray *xArray;
- (id)initWithFrame:(CGRect)frame withXpropertion:(NSString *)xp xArray:(NSArray *)xArray;
x軸.m
創(chuàng)建x軸上的內(nèi)容，各個(gè)點(diǎn)，和數(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
//返回點(diǎn)的y坐標(biāo)，用于確定視圖上點(diǎn)的y軸的位置
@property (nonatomic, strong) NSMutableArray *yArray;
- (id)initWithFrame:(CGRect)frame withYpropertion:(NSString *)yp yArray:(NSArray *)yArray;
y軸.m
創(chuàng)建y軸上坐標(biāo)點(diǎn)和數(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"];
