經(jīng)常我們應(yīng)用會需要繪制折線圖，對于圖表的繪制，有個很不錯的庫<a href= https://github.com/danielgindi/Charts>charts</a>,但是它是swift語言開發(fā)的，雖然也可以應(yīng)用到使用oc的項目中，不過對于第三方庫，如果和我們的需求樣式上不是完全一致，那要修改起來也多少是有點風險的。所以必要的時候我們就自己造輪子吧，畢竟這樣的輪子可能最適合我們的應(yīng)用，修改起來也放心。
那么生成一個折線圖，需要考慮些什么呢？
1、首先，圖表的顯示區(qū)域有多大？這個幾乎是最基本的。
2、然后是否需要生成橫坐標和縱坐標？如果需要生成縱坐標，那么我們應(yīng)該是顯示數(shù)據(jù)的差異呢還是從0開始顯示到最大值？這個策略的不同是根據(jù)我們具體的數(shù)據(jù)來確定的。如果數(shù)據(jù)本身差異就很大，圖表畫出來就是波浪起伏，那就不用考慮顯示差異了。但是如果數(shù)據(jù)本身的基數(shù)很大，那些細小的差異相當于基數(shù)而言幾乎可以忽略，那么，就得考慮顯示差異了。畢竟折現(xiàn)圖的主要目的還是向用戶展現(xiàn)一種趨勢。
3、確定好顯示策略，我們就需要將數(shù)據(jù)點映射到屏幕的區(qū)域上面了。
<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、然后連接點，當數(shù)據(jù)的點坐標已經(jīng)映射好，直接將每個點連接起來就好了。
<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>
好了，折線圖完工。如果我們并不需要很多很強大的圖表，而只是一個簡單樸素的圖表的話，那么這樣幾乎就合乎要求了，而且并不要很麻煩的工作。有時候不造輪子，但是對于造輪子的方法，還是要有所掌握的。
