经常我们应用会需要绘制折线图，对于图表的绘制，有个很不错的库<a href= https://github.com/danielgindi/Charts>charts</a>,但是它是swift语言开发的，虽然也可以应用到使用oc的项目中，不过对于第三方库，如果和我们的需求样式上不是完全一致，那要修改起来也多少是有点风险的。所以必要的时候我们就自己造轮子吧，毕竟这样的轮子可能最适合我们的应用，修改起来也放心。
那么生成一个折线图，需要考虑些什么呢？
1、首先，图表的显示区域有多大？这个几乎是最基本的。
2、然后是否需要生成横坐标和纵坐标？如果需要生成纵坐标，那么我们应该是显示数据的差异呢还是从0开始显示到最大值？这个策略的不同是根据我们具体的数据来确定的。如果数据本身差异就很大，图表画出来就是波浪起伏，那就不用考虑显示差异了。但是如果数据本身的基数很大，那些细小的差异相当于基数而言几乎可以忽略，那么，就得考虑显示差异了。毕竟折现图的主要目的还是向用户展现一种趋势。
3、确定好显示策略，我们就需要将数据点映射到屏幕的区域上面了。
<pre>
<code>
if(_graphDatas.count < 1) {
return;
}
NSNumber* minNum = [[NSNumber alloc] initWithInt:_baseYValue];
NSNumber* maxData = [[NSNumber alloc] initWithInt:_maxYValue];
maxData = @([maxData intValue] - [minNum intValue]);
int width = graphSize.width - 4LEFT_INSET-INNER_INSET;
int height = (_yCorNum-1)Y_PER_INTER;
CGFloat xStart = INNER_INSET;
CGFloat yStart = TOP_INSET;
CGFloat xpos=0;
CGFloat ypos=0;
[_xPosArr removeAllObjects];
[_yPosArr removeAllObjects];
if(_graphDatas.count == 1) {
CGFloat num = [[_graphDatas objectAtIndex:0] floatValue] - [minNum floatValue];
ypos = height(1-num/[maxData floatValue]) + yStart;
[_yPosArr addObject:[NSNumber numberWithFloat:ypos]];
return;
}
CGFloat x_per_inter = width/(1.0_graphDatas.count-1);
for(int i=0; i<_graphDatas.count; i++) {
CGFloat num = [GET_OBJECT_AT_INDEX(_graphDatas, i) floatValue] - [minNum floatValue];
xpos = ix_per_inter + xStart;
ypos = height(1-num/[maxData floatValue]) + yStart;
[_xPosArr addObject:[NSNumber numberWithFloat:xpos]];
[_yPosArr addObject:[NSNumber numberWithFloat:ypos]];
}
</code>
</pre>
4、接下来，绘制横坐标和纵坐标；
5、然后连接点，当数据的点坐标已经映射好，直接将每个点连接起来就好了。
<code>
xPos = [GET_OBJECT_AT_INDEX(_xPosArr, arrIndex) floatValue];
yPos = [GET_OBJECT_AT_INDEX(_yPosArr, arrIndex) floatValue];
[path moveToPoint:CGPointMake(xPos, yPos)];
for (int i=1; i<_yPosArr.count; i++) {
xPos = [GET_OBJECT_AT_INDEX(_xPosArr, i) floatValue];
yPos = [GET_OBJECT_AT_INDEX(_yPosArr, i) floatValue];
[path addLineToPoint:CGPointMake(xPos, yPos)];
}
[path stroke];
</code>
6、然而有些时候，我们还需要一些装饰，比如，在折线图下面加一点渐变：
<code>
CGContextSaveGState(context);
NSMutableArray cgColors = [NSMutableArray array];
[cgColors addObject:(id)[UIColor colorWithRGBHex:_lineColor alpha:0.56].CGColor];
[cgColors addObject:(id)[UIColor colorWithRGBHex:_lineColor alpha:0].CGColor];
CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(space, (__bridge CFArrayRef)cgColors, NULL);
CGPoint startPoint = CGPointMake(0, 0);
CGPoint endPoint = CGPointMake(0, TOP_INSET+(_yCorNum-1)Y_PER_INTER);
[path addLineToPoint:CGPointMake(xPos, self.height)];
[path addLineToPoint:CGPointMake(lineLeftMargin+LEFT_INSET, self.height)];
[path closePath];
[path addClip];
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, kCGGradientDrawsAfterEndLocation);
CGContextRestoreGState(context);
CGGradientRelease(gradient);
CGColorSpaceRelease(space);
</code>
好了，折线图完工。如果我们并不需要很多很强大的图表，而只是一个简单朴素的图表的话，那么这样几乎就合乎要求了，而且并不要很麻烦的工作。有时候不造轮子，但是对于造轮子的方法，还是要有所掌握的。
