一個(gè)簡(jiǎn)單易用的折線(xiàn)圖控件，最近項(xiàng)目工程中需要用到一個(gè)折現(xiàn)圖，看了網(wǎng)上的一些例子，但都不能滿(mǎn)足UED的特殊要求，所以只能自己寫(xiě)了一個(gè)。
先來(lái)看下效果圖：
折線(xiàn)圖
基本實(shí)現(xiàn)以下功能：
- 支持自定義Y軸坐標(biāo)數(shù)
- 支持自定義X軸顯示索引
- 添加參考線(xiàn)、點(diǎn)擊標(biāo)線(xiàn)
- 支持自定義彈出說(shuō)明視圖
·····
Demo見(jiàn)github YASimpleGraph，喜歡的話(huà)請(qǐng)star下_
使用說(shuō)明
YASimpleGraph 目前已經(jīng)支持CocoaPods，可以在很短的時(shí)間內(nèi)被添加到任何工程中。
安裝
YASimpleGraph 的安裝，最簡(jiǎn)單的方法是使用CocoaPods，在PodFile里添加如下：
pod 'YASimpleGraph', '~> 0.0.1'
或者直接將YASimpleGraphView.h和YASimpleGraphView.m兩個(gè)源文件直接拖進(jìn)自己的項(xiàng)目工程中。
集成
- 首先導(dǎo)入頭文件
#import "YASimpleGraphView.h"
- 遵循相應(yīng)協(xié)議
@interface ViewController () <YASimpleGraphDelegate>
- 初始化
//初始化數(shù)據(jù)源
allValues = @[@"20.00",@"0",@"110.00",@"70",@"80",@"40"];
allDates = @[@"06/01",@"06/02",@"06/03",@"06/04",@"06/05",@"06/06"];
//初始化折線(xiàn)圖并設(shè)置相應(yīng)屬性
YASimpleGraphView *graphView = [[YASimpleGraphView alloc]init];
graphView.frame = CGRectMake(15, 200, 375-30, 200);
graphView.backgroundColor = [UIColor whiteColor];
graphView.allValues = allValues;
graphView.allDates = allDates;
graphView.defaultShowIndex = allDates.count-1;
graphView.delegate = self;
graphView.lineColor = [UIColor grayColor];
graphView.lineWidth = 1.0/[UIScreen mainScreen].scale;
graphView.lineAlpha = 1.0;
graphView.enableTouchLine = YES;
[self.view addSubview:graphView];
- 開(kāi)始繪制
[graphView startDraw];
- 實(shí)現(xiàn)相應(yīng)協(xié)議
//自定義X軸 顯示標(biāo)簽索引
- (NSArray *)incrementPositionsForXAxisOnLineGraph:(YASimpleGraphView *)graph {
return @[@0,@1,@2,@3,@4,@5];
}
//Y軸坐標(biāo)點(diǎn)數(shù)
- (NSInteger)numberOfYAxisLabelsOnLineGraph:(YASimpleGraphView *)graph {
return 5;
}
//自定義popUpView
- (UIView *)popUpViewForLineGraph:(YASimpleGraphView *)graph {
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 0)];
label.backgroundColor = [UIColor colorWithRed:146/255.0 green:191/255.0 blue:239/255.0 alpha:1];
label.numberOfLines = 0;
label.font = [UIFont systemFontOfSize:10];
label.textAlignment = NSTextAlignmentCenter;
return label;
}
//修改相應(yīng)點(diǎn)位彈出視圖
- (void)lineGraph:(YASimpleGraphView *)graph modifyPopupView:(UIView *)popupView forIndex:(NSUInteger)index {
UILabel *label = (UILabel*)popupView;
NSString *date = [NSString stringWithFormat:@"%@",allDates[index]];
NSString *str = [NSString stringWithFormat:@" %@ \n %@元 ",date,allValues[index]];
CGRect rect = [str boundingRectWithSize:CGSizeMake(MAXFLOAT, 40) options:NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:10]} context:nil];
[label setFrame:CGRectMake(0, 0, rect.size.width, rect.size.height)];
label.textColor = [UIColor whiteColor];
label.text = str;
}
完成上述步驟，折線(xiàn)圖控件已經(jīng)集成到我們的項(xiàng)目中了，當(dāng)然YASimpleGraph還提供了一系列的對(duì)外屬性變量，使我們可以高度自定義折線(xiàn)圖控件，如下：
/// The line color
@property (nonatomic, strong) UIColor *lineColor;
/// The line width
@property (nonatomic, assign) CGFloat lineWidth;
/// The line alpha
@property (assign, nonatomic) float lineAlpha;
/// The Dot color
@property (nonatomic, strong) UIColor *dotColor;
/// The Dot borderColor
@property (nonatomic, strong) UIColor *dotBorderColor;
/// The Dot width
@property (nonatomic, assign) CGFloat dotWidth;
/// The Dot borderWidth
@property (nonatomic, assign) CGFloat dotBorderWidth;
/// The dashLine color
@property (nonatomic, strong) UIColor *dashLineColor;
/// The dashLine width
@property (nonatomic, assign) CGFloat dashLineWidth;
/// The bottomLine color
@property (nonatomic, strong) UIColor *bottomLineColor;
/// The bottomLine width
@property (nonatomic, assign) CGFloat bottomLineHeight;
····
等等一系列，具體可參考YASimpleGraphView.h
實(shí)現(xiàn)過(guò)程
實(shí)現(xiàn)過(guò)程大致分為以下幾步：
- draw 坐標(biāo)軸&點(diǎn)、參考線(xiàn)
- draw 數(shù)據(jù)點(diǎn)、折線(xiàn)
- 處理手勢(shì)點(diǎn)擊
簡(jiǎn)要列出上述3步中需要注意的一些地方：
a. 橫坐標(biāo)軸根據(jù)點(diǎn)的個(gè)數(shù)直接等分就好，縱坐標(biāo)軸有點(diǎn)難度，這里參考了同事的縱坐標(biāo)取整算法和最小值優(yōu)化，實(shí)現(xiàn)主要如下：
- (NSInteger) calcIntegerDeltaValue:(double) maxValue minValue:(double) minValue{
NSInteger integerDetla = ceil((maxValue - minValue) / (numberOfYAxis-1));
//對(duì)得到的整數(shù)進(jìn)一步取整 如： 101 -> 110, 1001 -> 1100
if (integerDetla == 0) { //值為0的水平直線(xiàn)則返回100一個(gè)值的間距
return 100;
}else{
return [self ajustIntegerValue:integerDetla];
}
}
- (NSInteger)ajustIntegerValue:(NSInteger) origalValue{
if (origalValue < 100) {
return origalValue;
}else{
NSInteger base = origalValue;
NSInteger round = 1;
while (origalValue > 100) {
origalValue = origalValue / 10;
round *= 10;
}
return base - base % round + round;
}
}
b. 折線(xiàn)直接連接坐標(biāo)點(diǎn)即可，當(dāng)畫(huà)曲線(xiàn)時(shí)，為使曲線(xiàn)更加曲滑，采取兩點(diǎn)之間兩次二次貝塞爾，即先取中點(diǎn)，然后分別對(duì)起始點(diǎn)進(jìn)行二次貝塞爾，具體實(shí)現(xiàn)如下：
+ (UIBezierPath *)quadCurvedPathWithPoints:(NSArray *)points {
UIBezierPath *path = [UIBezierPath bezierPath];
NSValue *value = points[0];
CGPoint p1 = [value CGPointValue];
[path moveToPoint:p1];
if (points.count == 2) {
value = points[1];
CGPoint p2 = [value CGPointValue];
[path addLineToPoint:p2];
return path;
}
for (NSUInteger i = 1; i < points.count; i++) {
value = points[i];
CGPoint p2 = [value CGPointValue];
CGPoint midPoint = midPointForPoints(p1, p2);
[path addQuadCurveToPoint:midPoint controlPoint:controlPointForPoints(midPoint, p1)];
[path addQuadCurveToPoint:p2 controlPoint:controlPointForPoints(midPoint, p2)];
p1 = p2;
}
return path;
}
static CGPoint midPointForPoints(CGPoint p1, CGPoint p2) {
return CGPointMake((p1.x + p2.x) / 2, (p1.y + p2.y) / 2);
}
static CGPoint controlPointForPoints(CGPoint p1, CGPoint p2) {
CGPoint controlPoint = midPointForPoints(p1, p2);
CGFloat diffY = fabs(p2.y - controlPoint.y);
if (p1.y < p2.y)
controlPoint.y += diffY;
else if (p1.y > p2.y)
controlPoint.y -= diffY;
return controlPoint;
}
