iOS如何生成折线图
2017-12-07 本文已影响520人
WXGD
折线图.gif
好吧！首先还是要感谢我们万恶的设计师，非要做什么折线图，而且还非要模仿人家很成熟的APP设计。
其实网上有非常多的折线图画法，但是直接使用现成的的折线图框架，都无法完全满足我们设计师的要求，最终只能自定义了。这里要感谢健健锅的iOS折线图实现（一）。在折线图的实现上，给了我很多参考。
好了，下面进入正题
一、首先先来看看，常用的画线控件都有那些。
1、UIGraphicsGetCurrentContext的使用，先把代码贴出来：
// 创建上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 线宽
CGContextSetLineWidth(context, 0.5);
// 线颜色
CGContextSetRGBStrokeColor(context, 0.87, 0.87, 0.87, 1);
// 起点
CGContextMoveToPoint(context, 100, 100);
// 终点
CGContextAddLineToPoint(context, 200, 100);
// 加载上下文
CGContextStrokePath(context);
是不是感觉特别的简单。好吧，其实就这这么简单。只需要指定好线的起点和终点，一条直线就这么出现了。有一点需要指出画线的并非只能有一个点，而且可以同时指定多个点，然后画出一条连续的折线。
举个例子吧！下面的代码可以画出一个正方形：
CGContextMoveToPoint(context, 10, 10);
CGContextAddLineToPoint(context, 10, 100);
CGContextAddLineToPoint(context, 100, 100);
CGContextAddLineToPoint(context, 100, 10);
CGContextAddLineToPoint(context, 10, 10);
2、使用CAShapeLayer和UIBezierPath画线
还是先把代码贴出来：
// 折线属性
CAShapeLayer * dashLayer = [CAShapeLayer layer];
dashLayer.strokeColor = lineColor.CGColor;
dashLayer.fillColor = CLEARCOLOR.CGColor;
dashLayer.lineWidth = 0.5;
// 绘制折线
UIBezierPath * path = [[UIBezierPath alloc]init];
[self.layer addSublayer:dashLayer];
// 折线起点
[path moveToPoint:CGPointMake(10, 10)];
// 折线终点
[path addLineToPoint:CGPointMake(10, 100)];
dashLayer.path = path.CGPath;
完了，就是这么简单。对于CAShapeLayer和UIBezierPath这两个属性的使用，我就不细写了，这个两个属性的作用，UIBezierPath是用来指定画出图形的形状、位置等，CAShapeLayer则是用来控制画出图片的基本属性的。
同上下文一样，也是可以直接画出折线线条的，代码都差不多：
[path moveToPoint:CGPointMake(10, 10)];
[path addLineToPoint:CGPointMake(10, 100)];
[path addLineToPoint:CGPointMake(100, 100)];
[path addLineToPoint:CGPointMake(100, 10)];
[path addLineToPoint:CGPointMake(10, 10)];
好了，属性的基本使用写完了，下面就正式开始写折线图的画法了。
二、折线图的画法
1、X、Y坐标轴的画法
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 0.5);
CGContextSetRGBStrokeColor(context, 0.87, 0.87, 0.87, 1);
CGContextMoveToPoint(context, self.xOrigin, self.yAxisTopSpac);
CGContextAddLineToPoint(context, self.xOrigin, rect.size.height - self.yOrigin);
CGContextAddLineToPoint(context, rect.size.width - self.xAxisRightSpac, rect.size.height - self.yOrigin);
CGContextStrokePath(context);
具体注释，我就不写了，几乎和上面的用法没有任何区别。
2、X轴分割线
- (void)xLineDash:(NSArray *)nodeAry {
if (self.height != 0) {
for (NSInteger i = 1;i < nodeAry.count; i++ ) {
// 分割线属性
CAShapeLayer * dashLayer = [CAShapeLayer layer];
dashLayer.strokeColor = GrayLineColor.CGColor;
dashLayer.fillColor = CLEARCOLOR.CGColor;
dashLayer.lineWidth = 0.5;
// 绘制分割线
UIBezierPath *path = [[UIBezierPath alloc]init];
// 分割线起始点
[path moveToPoint:CGPointMake(self.xOrigin + self.xAxisSpac * i, self.yAxisTopSpac)];
[path addLineToPoint:CGPointMake(self.xOrigin + self.xAxisSpac * i, self.height - self.yOrigin)];
dashLayer.path = path.CGPath;
[self.layer addSublayer:dashLayer];
}
}
}
这里定义了一个数组，用来保存X轴节点，通过这个数组，画出对应的X轴分割线。
/** X轴节点数组 */
@property (strong, nonatomic) NSArray *xNodeAry;
3、Y轴分割线
/** Y轴节点数组 */
@property (strong, nonatomic) NSArray *yNodeAry;
// y轴分割线
- (void)yLineDash:(NSArray *)nodeAry {
if (self.width != 0) {
for (NSInteger i = 1;i < nodeAry.count; i++ ) {
// 分割线属性
CAShapeLayer * dashLayer = [CAShapeLayer layer];
dashLayer.strokeColor = GrayLineColor.CGColor;
dashLayer.fillColor = CLEARCOLOR.CGColor;
dashLayer.lineWidth = 0.5;
// 绘制分割线
UIBezierPath * path = [[UIBezierPath alloc]init];
// 分割线起始点
[path moveToPoint:CGPointMake(self.xOrigin, self.yAxisTopSpac + self.yAxisSpac * i)];
[path addLineToPoint:CGPointMake(self.width - self.xAxisRightSpac, self.yAxisTopSpac + self.yAxisSpac * i)];
dashLayer.path = path.CGPath;
[self.layer addSublayer:dashLayer];
}
}
}
做法同X轴相同。
4、X轴坐标点
// 创建x轴的数据
- (void)createLabelX:(NSArray *)nodeAry {
for (NSInteger i = 0; i < nodeAry.count; i++) {
// 获取展示字符
NSString *text = nodeAry[i];
// 计算字符size
CGSize size = [text sizeWithAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:10]}];
NSAttributedString *attributeSting = [[NSAttributedString alloc] initWithString:text attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:10]}];
size = [attributeSting size];
// 展示文字
UILabel * LabelMonth = [[UILabel alloc]initWithFrame:CGRectMake(self.xOrigin + self.xAxisSpac * i - size.width / 2,
self.frame.size.height - self.yOrigin + 5,
size.width, size.height)];
LabelMonth.text = text;
LabelMonth.font = [UIFont systemFontOfSize:10];
// LabelMonth.transform = CGAffineTransformMakeRotation(M_PI * 0.3);
[self addSubview:LabelMonth];
// 保存x轴坐标
[self.xNodeCordAry addObject:[NSString stringWithFormat:@"%f", self.xOrigin + self.xAxisSpac * i]];
}
}
这个地方其实同画分割线差不多，因为这个地方的难点，我感觉主要在坐标点的计算上，但是这种细致的计算，想来大家仔细想想都没什么问题了。
5、Y轴坐标点
// 创建y轴数据
- (void)createLabelY:(NSArray *)nodeAry {
for (NSInteger i = 0; i < nodeAry.count ; i++) {
// 获取展示字符
NSString *text = nodeAry[i];
// 计算字符size
CGSize size = [text sizeWithAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:10]}];
NSAttributedString *attributeSting = [[NSAttributedString alloc] initWithString:text attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:10]}];
size = [attributeSting size];
// 展示文字
UILabel * labelYdivision = [[UILabel alloc]initWithFrame:CGRectMake(self.xOrigin - size.width - 5,
self.yAxisTopSpac + self.yAxisSpac * i - size.height/2,
size.width, size.height)];
labelYdivision.text = text;
labelYdivision.font = [UIFont systemFontOfSize:10];
[self addSubview:labelYdivision];
}
}
一句话：同上。
其实此时折线图的坐标已经出现了，接下来就是画折线图了。
X、Y轴坐标
6、画折线
- (void)drawBrokenLine:(NSArray *)brokenLineSpotAry lineColor:(UIColor *)lineColor {
// 折线属性
CAShapeLayer * dashLayer = [CAShapeLayer layer];
dashLayer.strokeColor = lineColor.CGColor;
dashLayer.fillColor = CLEARCOLOR.CGColor;
dashLayer.lineWidth = 0.5;
// 绘制折线
UIBezierPath * path = [[UIBezierPath alloc]init];
// 折线图起点 brokenOrigin
CGPoint brokenOrigin = CGPointMake(self.xOrigin, [[brokenLineSpotAry firstObject] integerValue]);
// 折线起点
[path moveToPoint:brokenOrigin];
[self.layer addSublayer:dashLayer];
// 便利折线图数据
for (NSInteger i = 1;i < brokenLineSpotAry.count; i++ ) {
// 折线终点
brokenOrigin = CGPointMake(self.xOrigin + self.xAxisSpac * i, [[brokenLineSpotAry objectAtIndex:i] integerValue]);
[path addLineToPoint:brokenOrigin];
dashLayer.path = path.CGPath;
}
}
折线图的画法，没做的时候感觉挺难的，现在一步一步的拆分开，好像真的没什么技术难点啊！到这来折线图的核心代码已经都实现了。
7、标记点
// 画标记点
- (void)drawMarkeroint :(NSArray *)brokenLineSpotAry lineColor:(UIColor *)lineColor {
// 标记点起点
CGPoint markerOrigin = CGPointMake(self.xOrigin, [[brokenLineSpotAry firstObject] integerValue]);
// 便利折标记点数据
for (NSInteger i = 1;i <= brokenLineSpotAry.count; i++ ) {
// 白色标记点
UIView *whiteView = [[UIView alloc] init];
whiteView.backgroundColor = WhiteColor;
whiteView.x = markerOrigin.x - 5;
whiteView.y = markerOrigin.y - 5;
whiteView.size = CGSizeMake(10, 10);
whiteView.layer.masksToBounds = YES;
whiteView.layer.cornerRadius = 5;
[self addSubview:whiteView];
[self bringSubviewToFront:whiteView];
// 折线颜色标记点
UIView *markeriew = [[UIView alloc] init];
markeriew.backgroundColor = lineColor;
markeriew.x = 2.5;
markeriew.y = 2.5;
markeriew.size = CGSizeMake(5, 5);
markeriew.layer.masksToBounds = YES;
markeriew.layer.cornerRadius = 2.5;
[whiteView addSubview:markeriew];
// i==brokenLineAry.count的时候不去取下一个点的坐标
if (i < brokenLineSpotAry.count) {
// 保存下一个标记点位置
markerOrigin = CGPointMake(self.xOrigin + self.xAxisSpac * i, [[brokenLineSpotAry objectAtIndex:i] integerValue]);
}
}
}
这个地方为什么把标记点放的这么靠后，主要是因为使用CAShapeLayer画出来的图形是加载在layer层的，使用bringSubviewToFront（）并不能将视图放放置在最上层，这里我采取的做法是控制控件的创建时机，如果还有别的方法，也希望可以指点我一下。
标记点
7、点击折线图弹框
// 便利折线数组
for (NSInteger i = 0;i < brokenLineAry.count; i++ ) {
// 创建点击出现的文字弹框
UILabel *textBox = [[UILabel alloc] init];
textBox.textColor = WhiteColor;
textBox.backgroundColor = [UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:0.9];
textBox.textAlignment = NSTextAlignmentCenter;
textBox.font = [UIFont systemFontOfSize:10];
textBox.layer.masksToBounds = YES;
textBox.layer.cornerRadius = 5;
textBox.tag = 2000 + i;
[self addSubview:textBox];
[textBox setHidden:YES];
[textBox becomeFirstResponder];
}
8、添加轻拍手势
- (void)lineViewTapAction:(UIGestureRecognizer *)tap {
// 获取点击坐标
CGPoint point = [tap locationInView:self];
// 计算点击点所在区域
NSInteger xInt = (point.x - self.xOrigin) / self.xAxisSpac;
// 判断当前坐标是否大于等于1
if (xInt >= 1) {
CGFloat xCord = [[self.xNodeCordAry objectAtIndex:xInt + 1] doubleValue];
// 便利每一条折线，弹出数据弹框
for (int i = 0; i < self.brokenLineAry.count; i++) {
// 获取价格字符内容
NSArray *brokenAry = [self.brokenLineAry objectAtIndex:i];
NSString *text = [NSString stringWithFormat:@"单价：%@/㎡", [brokenAry objectAtIndex:xInt]];
// 计算字符size
CGSize size = [text sizeWithAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:10]}];
NSAttributedString *attributeSting = [[NSAttributedString alloc] initWithString:text attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:10]}];
size = [attributeSting size];
// 真实价格字符
UILabel *textBox = [self viewWithTag:2000 + i];
textBox.text = text;
textBox.x = xCord + 10;
textBox.width = 92;
textBox.height = size.height + 5;
if (point.y < self.height - 100) {
textBox.y = point.y + (textBox.height + 5) * i;
}else {
textBox.y = 100 + (textBox.height + 5) * i;
}
[textBox setHidden:NO];
}
// 绘制选中分割线
[self drawSelectedLine:xInt + 1];
}
}
这里我是对整个折线图view添加了一个轻拍手势，然后根据轻拍手势的点击位置，来判断应该选中标记点，以及相关数据的展示位置，这个地方的代码比较多，因为相关的判断也比较多，这里只是粘出来了一部分，有兴趣的朋友可以下载dome看看。
9、为了能够使折线图更多的具有兼容性，我将整个折线图都放在了一个scrollview上，创建了一个BrokenLineScrollView控件。
/** 折线图view */
self.brokenLineView = [BrokenLineView foundBrokenLineChartXNodeAry:xNodeAry yNodeAry:yNodeAry xOrigin:xOrigin yOrigin:yOrigin xAxisSpac:xAxisSpac yAxisSpac:yAxisSpac xAxisRightSpac:xAxisRightSpac yAxisTopSpac:yAxisTopSpac];
[self addSubview:self.brokenLineView];
// 设置折线图宽高
[self.brokenLineView mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(xAxisSpac * xNodeAry.count + xOrigin + xAxisRightSpac);
make.height.mas_equalTo(yAxisSpac * yNodeAry.count + yOrigin + yAxisTopSpac);
}];
10、终于是最后一个了，在折线图X轴滚动的时候，我们的设计师希望坐标Y轴一直存在，为了不改变折线图的画法，我又对BrokenLineScrollView加了一层封装，创建了一个BrokenLineBackView控件，然后在这个控件上，创建了一个展示Y轴坐标的scrollview，之所以使用scrollview是因为我希望当折线图出现上下滚动的需求的时候，Y轴坐标也可以随着折线图滚动而滚动。核心代码如下：
#pragma makr - 代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// scrollView联合滚动
if (self.brokenScrollView.contentOffset.x > self.xOrigin) {
[self.yAxisMarkerView setHidden:NO];
}else {
[self.yAxisMarkerView setHidden:YES];
}
// 折线图滚动的时候，滚动Y轴坐标scrollview
self.yAxisMarkerView.contentOffset = CGPointMake(0, self.brokenScrollView.contentOffset.y);
// 隐藏选中分割线和弹框
for (int i = 0; i < self.brokenScrollView.brokenLineView.brokenLineAry.count; i++) {
UILabel *textBox = [self.brokenScrollView.brokenLineView viewWithTag:2000 + i];
[textBox setHidden:YES];
// 删除选中分割线
[self.brokenScrollView.brokenLineView.seleDashView setHidden:YES];
}
}
滚动折线图
代码实现部分基本上就是这样了。因为坐标轴的实现由一些是不可缺少的字段，因此对折线图的创建，我使用了一个便利构造器方法。
+ (instancetype)foundBrokenLineChartXNodeAry:(NSArray *)xNodeAry yNodeAry:(NSArray *)yNodeAry xOrigin:(CGFloat)xOrigin yOrigin:(CGFloat)yOrigin xAxisSpac:(CGFloat)xAxisSpac yAxisSpac:(CGFloat)yAxisSpac xAxisRightSpac:(CGFloat)xAxisRightSpac yAxisTopSpac:(CGFloat)yAxisTopSpac {
BrokenLineView *brokenLineView = [[BrokenLineView alloc] init];
[brokenLineView brokenLineXNodeAry:xNodeAry yNodeAry:yNodeAry xOrigin:xOrigin yOrigin:yOrigin xAxisSpac:xAxisSpac yAxisSpac:yAxisSpac xAxisRightSpac:xAxisRightSpac yAxisTopSpac:yAxisTopSpac];
return brokenLineView;
}
这几个属性分别是：
/** X轴节点数组 */
self.xNodeAry = xNodeAry;
/** Y轴节点数组 */
self.yNodeAry = yNodeAry;
/** 坐标原点X */
self.xOrigin = xOrigin;
/** 坐标原点Y(距离下边距离) */
self.yOrigin = yOrigin;
/** X轴间距(默认为50) */
self.xAxisSpac = xAxisSpac;
/** X轴间距离右边距离 */
self.xAxisRightSpac = xAxisRightSpac;
/** Y轴间距(默认为50) */
self.yAxisSpac = yAxisSpac;
/** Y轴间距离上边距离 */
self.yAxisTopSpac = yAxisTopSpac;
好了，好了，想必能看到这里的人实在不多吧！我也是第一次写这么长的文字，而且使用了这么多的代码。如果有什么问题，也可随时联系我啊！dome我已经发在GitHub上，又兴趣的朋友可以下载看看啊！
