項目需求需要根據(jù)數(shù)據(jù)畫一個折線圖衣迷，網(wǎng)上找了下沒找到對應(yīng)的第三方胆筒。只能默默的自己寫個邮破，廢話就不多說了看下面效果圖。
折線圖.gif
下面就主要說一下實現(xiàn)思路仆救，文章末尾有源碼抒和。
坐標(biāo)計算
由于屏幕的坐標(biāo)是左上角為原點坐標(biāo)（0，0）彤蔽，但是我們視覺看的時候原點應(yīng)該是在左下角摧莽。對這個我們就需要反過來計算，還有一點就是比例的問題計算獲得折線y軸坐標(biāo)顿痪，x軸坐標(biāo)是固定的等寬所以就不需要一一計算了镊辕。
對折線y軸坐標(biāo)油够，我的處理方式：
//折線圖高度 / （折線圖最高點 + 最高點/5） = 比例
_maxPoint = maxCount + maxCount / 5;//最高點
_scale = SCR_W(234) / _maxPoint;//比例，SCR_W(234)為折線圖的高度
折線圖最高點 + 最高點/5這個主要是讓折線不會達到最高點征懈，相當(dāng)于比最到點還高讓圖看起來比較美觀石咬。拿到比例后通過折線圖高度 - 值x比例 = y軸坐標(biāo)點
//起點
CGFloat startY = SCR_W(256) - [dataAry[idx] floatValue] * _scale;
//終點
CGFloat endY = SCR_W(256) - [dataAry[idx + 1] floatValue] * _scale;
這樣算出了y軸坐標(biāo)，下面就簡單了卖哎。下面畫線代碼
- (void)drawLineWithBrokenLintData:(NSArray *)dataAry lineColor:(UIColor *)lineColor
{
if (dataAry.count == 0) {
return;
}
CAShapeLayer * shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = self.bounds;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 1;
shapeLayer.strokeColor = lineColor.CGColor;
UIBezierPath *path = [UIBezierPath bezierPath];
for (int idx = 0; idx < dataAry.count - 1; idx++) {
CGFloat startY = SCR_W(256) - [dataAry[idx] floatValue] * _scale;
CGFloat endY = SCR_W(256) - [dataAry[idx + 1] floatValue] * _scale;
[path moveToPoint:CGPointMake(_columnWidth * idx + SCR_W(10), startY)];
[path addLineToPoint:CGPointMake(_columnWidth * (idx + 1) + SCR_W(10), endY)];
shapeLayer.path = path.CGPath;
}
[self.layer insertSublayer:shapeLayer below:_currentView.layer];
/*
[dataAry enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
//折線
if (idx == _column - 1) {
return ;
}
CAShapeLayer * shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = self.bounds;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 1;
shapeLayer.strokeColor = lineColor.CGColor;
CGFloat startY = SCR_W(256) - [dataAry[idx] floatValue] * _scale;
CGFloat endY = SCR_W(256) - [dataAry[idx + 1] floatValue] * _scale;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(_columnWidth * idx + SCR_W(10), startY)];
[path addLineToPoint:CGPointMake(_columnWidth * (idx + 1) + SCR_W(10), endY)];
shapeLayer.path = path.CGPath;
[self.layer insertSublayer:shapeLayer below:_currentView.layer];
}];
*/
}
選中線鬼悠，跟隨手指移動
讓選中的線跟隨手指移動主要有兩個點：
1、獲取當(dāng)前手指的位置坐標(biāo)
2亏娜、判斷當(dāng)前手指的坐標(biāo)是距離左邊的分割線近還是距離右邊的分割線近
獲取當(dāng)前手指觸摸坐標(biāo)
//觸摸
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
//獲取觸摸對象
UITouch * touch = touches.anyObject;
//返回觸摸點在視圖中的當(dāng)前坐標(biāo)
CGPoint point = [touch locationInView:[touch view]];
[UIView animateWithDuration:0.25 animations:^{
[_lineView setFrame:CGRectMake([self nearBy:point.x], 0, 1, SCR_W(280))];
_current = _current > _column -1 ? _column -1 : _current;
[_currentView setChartCurrentDetailWithTime:_timeAry[_current] income:_incomeAry[_current] refund:_refundAry[_current]];
}];
}
//拖動
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
//獲取觸摸對象
UITouch * touch = touches.anyObject;
//返回觸摸點在視圖中的當(dāng)前坐標(biāo)
CGPoint point = [touch locationInView:[touch view]];
[UIView animateWithDuration:0.25 animations:^{
[_lineView setFrame:CGRectMake([self nearBy:point.x], 0, 1, SCR_W(280))];
_current = _current > _column -1 ? _column -1 : _current;
[_currentView setChartCurrentDetailWithTime:_timeAry[_current] income:_incomeAry[_current] refund:_refundAry[_current]];
}];
}
計算選中線距離左邊or右邊焕窝？
- (CGFloat)nearBy:(CGFloat)pointX
{
//超出邊距
if (pointX > _columnWidth * (_column - 1) + SCR_W(10)) {
_current = _column - 1;
return _current * _columnWidth + SCR_W(10);
}
//當(dāng)前位置在第幾個
int tmpX = pointX /(_columnWidth);
//判斷距離那邊近
CGFloat currentX = pointX - tmpX * (_columnWidth);
_current = currentX - _columnWidth/2 > 0 ? tmpX + 1 : tmpX;
return _current * _columnWidth + SCR_W(10);
}
總體思路很簡單维贺，剩下的就是封裝了袜啃，我把代碼簡單封裝了下，上傳到git源碼上幸缕，有需要的可以去下載群发。
