經(jīng)常我們應(yīng)用會需要繪制折線圖，對于圖表的繪制赁酝，有個很不錯的庫<a href= https://github.com/danielgindi/Charts>charts</a>,但是它是swift語言開發(fā)的象浑，雖然也可以應(yīng)用到使用oc的項目中，不過對于第三方庫句携，如果和我們的需求樣式上不是完全一致榔幸，那要修改起來也多少是有點風(fēng)險的。所以必要的時候我們就自己造輪子吧务甥，畢竟這樣的輪子可能最適合我們的應(yīng)用牡辽，修改起來也放心喳篇。
那么生成一個折線圖敞临，需要考慮些什么呢？
1麸澜、首先挺尿，圖表的顯示區(qū)域有多大？這個幾乎是最基本的炊邦。
2编矾、然后是否需要生成橫坐標和縱坐標？如果需要生成縱坐標馁害，那么我們應(yīng)該是顯示數(shù)據(jù)的差異呢還是從0開始顯示到最大值窄俏？這個策略的不同是根據(jù)我們具體的數(shù)據(jù)來確定的。如果數(shù)據(jù)本身差異就很大碘菜，圖表畫出來就是波浪起伏，那就不用考慮顯示差異了室囊。但是如果數(shù)據(jù)本身的基數(shù)很大万搔，那些細小的差異相當(dāng)于基數(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拦盹、然后連接點，當(dāng)數(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>
好了歉秫，折線圖完工蛾洛。如果我們并不需要很多很強大的圖表，而只是一個簡單樸素的圖表的話雁芙，那么這樣幾乎就合乎要求了轧膘，而且并不要很麻煩的工作。有時候不造輪子兔甘，但是對于造輪子的方法谎碍，還是要有所掌握的。
