iOS 曲線圖、折線圖（ORCharts）的使用

相信大家在開發過程中經常會遇到使用折線圖、曲線圖等，但是我們自己開發就會非常浪費時間了，ORCharts就解決了這個問題，他將大家所需要的折線圖和曲線圖已經全部封裝完畢，大家只要使用即可，使用也是非常簡單。

首先、引庫

#import "ORLineChartView.h"

接下來就是遵守他的協議，他的協議一共有兩個

ORLineChartViewDataSource, ORLineChartViewDelegate

最後就是創建並使用

第一步、創建曲線圖或者折線圖

    ORLineChartView *lineChartView = [[ORLineChartView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 180)];
    lineChartView.dataSource = self;
    lineChartView.delegate = self;
    //設置曲線圖或折線圖的風格ORLineChartStyleSlider：指示器隨拖拽顯示（默認）ORLineChartStyleControl：指示器由點擊控制
    lineChartView.config.style = ORLineChartStyleSlider;
    //設置曲線圖或者折線圖的線的寬度
    lineChartView.config.chartLineWidth = 1;
    //設置動畫時長
    lineChartView.config.animateDuration = 1;
    //設置展示是曲線圖還是折線圖，默認曲線圖 YES 爲折線圖
    lineChartView.config.isBreakLine = NO;
    //設置X軸的Label的寬度
    lineChartView.config.bottomLabelWidth = 75;
    //設置陰影閒的顏色
    lineChartView.config.shadowLineColor = [UIColor clearColor];
    //設置滑動展示數據控件的北京顏色
    lineChartView.config.indicatorTintColor = [UIColor clearColor];
    //設置曲線或者折現距離X軸之間的顏色漸變色
    lineChartView.config.gradientColors = @[[UIColor orangeColor],[UIColor whiteColor]];
    [self.view addSubview:lineChartView];

第二步、設置Y軸或者X軸的數據源

    //設置橫向數據源
    _xdatas  = [[NSMutableArray alloc]init];
    //設置縱向數據源
    _ydatas = [[NSMutableArray alloc]init];
    for ( NSDictionary *dic in array ) {
        [_xdatas addObject:dic[@"x"]];
        [_ydatas addObject:dic[@"x"]];
    }
    //刷新數據
    [lineChartView reloadData];

第三步、實現ORLineChartView的協議方法、（類似於tableView）

#pragma mark - ORLineChartViewDataSource 
//返回Y軸數據源的數量
- (NSInteger)numberOfHorizontalDataOfChartView:(ORLineChartView *)chartView {
    return _ydatas.count;
}

//返回Y軸數據源對應的內容
- (CGFloat)chartView:(ORLineChartView *)chartView valueForHorizontalAtIndex:(NSInteger)index {
    return [_ydatas[index] doubleValue];  
}

//返回X軸數據源對應的內容
- (NSString *)chartView:(ORLineChartView *)chartView titleForHorizontalAtIndex:(NSInteger)index{
    return _xdatas[index];  
    
}

//返回Y展示數量範圍，默認爲5，例如：從20開始到40結束分別爲 20、25、30、35、40
- (NSInteger)numberOfVerticalLinesOfChartView:(ORLineChartView *)chartView {
    return 6;
}

//設置每次滑動或者點擊位置的Y軸對應的值
- (NSAttributedString *)chartView:(ORLineChartView *)chartView attributedStringForIndicaterAtIndex:(NSInteger)index {
    NSAttributedString *string = [[NSAttributedString alloc] initWithString:[NSString stringWithFormat:@"%g", [_ydatas[index] doubleValue]]];
    return string;
}

//設置Y軸展示數據的顏色
- (NSDictionary<NSAttributedStringKey,id> *)labelAttrbutesForVerticalOfChartView:(ORLineChartView *)chartView {
    return @{NSFontAttributeName : [UIFont systemFontOfSize:12], NSForegroundColorAttributeName : [UIColor colorWithHexString:@"#999999"]};
}

//設置X軸展示數據的顏色
- (NSDictionary<NSAttributedStringKey,id> *)labelAttrbutesForHorizontalOfChartView:(ORLineChartView *)chartView {
    return @{NSFontAttributeName : [UIFont systemFontOfSize:12], NSForegroundColorAttributeName : [UIColor colorWithHexString:@"#999999"]};
}

#pragma mark - ORLineChartViewDelegate
//獲取點擊位置的數據
- (void)chartView:(ORLineChartView *)chartView didSelectValueAtIndex:(NSInteger)index {
//    NSLog(@"did select index %ld and value  is %g", (long)index, [_datas[index] doubleValue]);
}

//獲取滑動到某個位置的數據
- (void)chartView:(ORLineChartView *)chartView indicatorDidChangeValueAtIndex:(NSInteger)index {
//    NSLog(@"indicater did change index %ld and value  is %g", (long)index, [_datas[index] doubleValue]);
}

ORCharts的下載地址：

https://github.com/SunriseOYR/ORCharts