周期数据分盘展示（有，点、折线、贝赛尔曲线）

         前言：

                      现在是数据时代。App的开发，UI的展示，也都是数据的支撑。有数据，但是也的有好的效果展示。下面，我们将进行一个效果，还不错的展示。

        功能介绍：

      App的UI界面搭建代码如下：

                      注释：这里就不做更多的介绍。App 难度不大。项目里面也有注释。

//

//  DataCoordinate_ViewController.m

//  DataCoordinate

//

//  Created by 周双建 on 16/2/29.

//  Copyright © 2016年 周双建. All rights reserved.

//

#import "DataCoordinate_ViewController.h"

#import "Coordinate_View.h"

@interface DataCoordinate_ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout,UITableViewDataSource,UITableViewDelegate>

// 主要控件

@property(strong,nonatomic) UICollectionView * CoordinateCollectionView;

@property(strong,nonatomic) UITableView * TableView;

// 总卓标的数据

@property(strong,nonatomic) NSArray * VerticalDataArray;

// 水平数据

@property(nonatomic,strong) NSMutableArray * LevelDataArray;

// 要绘制的数据

@property(nonatomic,strong) NSMutableArray * PointDataArray;

@end

@implementation DataCoordinate_ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    self.title = @"成功QQ吧";

    self.view.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:1.0f];

    // 初始化数据（竖直）

    self.VerticalDataArray = @[@"2.5",@"4.0",@"5.0",@"6.0",@"7.0",@"8.0",@"9.0",@"11.0",@"15.0",@"33.0"];

    // 创建水平数据

    self.LevelDataArray = [NSMutableArray arrayWithCapacity:0];

    for(int i = 1 ;i<10 ;i++){

        NSMutableArray * TempArray =[NSMutableArray arrayWithCapacity:0];

        [TempArray addObjectsFromArray:@[@"04:00",@"08:00",@"12:00",@"16:00",@"20:00"]];

        NSString * TempStr = [NSString stringWithFormat:@"05-0%d",i];

        [TempArray insertObject:TempStr atIndex:0];

        [self.LevelDataArray addObject:TempArray];

    }

    NSLog(@"传入前的数据：：%@",self.LevelDataArray);

    [self createDataPointArray];

    // 主要控件的初始化

    [self CreateTableView];

    // Do any additional setup after loading the view.

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

/*

#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {

    // Get the new view controller using [segue destinationViewController].

    // Pass the selected object to the new view controller.

}

*/

#pragma mark  CollectionView 的创建

-(void)CreateCollectionView{

    // 设置Cell 的形式。（此处，后期要重写）。

    UICollectionViewFlowLayout * FlowLayout = [[UICollectionViewFlowLayout alloc]init];

    FlowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    FlowLayout.sectionInset = UIEdgeInsetsMake(-10, 0, 0, 0);

    self.CoordinateCollectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(30,0, self.view.bounds.size.width, self.view.bounds.size.height-60) collectionViewLayout:FlowLayout];

    self.CoordinateCollectionView.backgroundColor = [[UIColor whiteColor]colorWithAlphaComponent:1.0f];

    // 注册collectionView 的cell

    [self.CoordinateCollectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"CELL_ZSJ"];

    self.CoordinateCollectionView.delegate = self;

    self.CoordinateCollectionView.dataSource = self;

}

#pragma mark  CollectionView 的代理

// 返回的组数

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{

    return 1;

}

// 每组返回的个数

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return 6;

}

// cell 的布局

-(UICollectionViewCell*) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    UICollectionViewCell * CollectionCell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CELL_ZSJ" forIndexPath:indexPath];

    CollectionCell.backgroundColor = [[UIColor redColor]colorWithAlphaComponent:0.9f];

    // 初始化主要的View。（所有的操作都在这个上面）。

    Coordinate_View * CoordinateView = [[Coordinate_View alloc]initWithFrame:CollectionCell.frame];

    CoordinateView.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:1.0f];

    // 设置绘制图形的类型。有点、折线、贝塞尔曲线。

    if (indexPath.row

        ==2) {

        CoordinateView.LineType = BezierType;

    }else if (indexPath.row==3){

        CoordinateView.LineType = BrokenType;

    }else{

        CoordinateView.LineType = PointType;

    }

    // 设置水平数据

    [CoordinateView setData:self.LevelDataArray[indexPath.row]];

    // 设置绘制数据

    [CoordinateView setDataPoint:self.PointDataArray[indexPath.row]];

    // 调用，进行绘制

    [CoordinateView setNeedsDisplay];

    CollectionCell.backgroundView = CoordinateView;

    return CollectionCell;

}

// 设置collectionCell 的高度。

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

    return CGSizeMake(self.view.bounds.size.width, self.view.bounds.size.height-60);

}

// 设置collectioncell 个个cell的偏移量。

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{

    return UIEdgeInsetsMake(0,0, 0,0);

}

// 设置collectincell 的间距。

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{

    return 0.0f;

}

// 设置 collectioncell的头部和尾部的大小。

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{

    return CGSizeMake(0, 0);

}

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{

    return CGSizeMake(0, 0);

}

#pragma mark  tableView

-(void)CreateTableView{

    self.TableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 60, self.view.bounds.size.width, self.view.bounds.size.height-124) style:UITableViewStylePlain];

    self.navigationController.navigationBar.translucent = NO;

    self.TableView.delegate = self;

    self.TableView.dataSource =self;

    self.TableView.pagingEnabled = YES;

    self.TableView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);

    [self.view addSubview:self.TableView];

}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    return 6;

}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

    // 返回tableView 每个cell 的高度（重要）

    return self.view.bounds.size.height-60;

}

-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    UITableViewCell * Cell = [tableView dequeueReusableCellWithIdentifier:@"ID_CELL"];

    if (!Cell) {

        Cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"ID_CELL"];

        Cell.backgroundColor = [UIColor whiteColor];

        // 创建主要View，即是 CollectionView

        [self CreateCollectionView];

        [Cell.contentView addSubview:self.CoordinateCollectionView];

#pragma mark   垂直坐标数据

        for (int i =(int)self.VerticalDataArray.count -1 ; i>=0; i--) {

            UILabel * VerticalDataArrayLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, i * ((self.view.bounds.size.height- 60)/(self.VerticalDataArray.count+1)), 30, 10)];

            VerticalDataArrayLabel.font = [UIFont systemFontOfSize:12];

            VerticalDataArrayLabel.text = self.VerticalDataArray[self.VerticalDataArray.count-i-1];

            [Cell.contentView addSubview:VerticalDataArrayLabel];

        }

        // 水线

        UIView * Line = [[UIView alloc]initWithFrame:CGRectMake(30, 0, 0.5, self.view.bounds.size.height-110)];

        Line.backgroundColor = [[UIColor lightGrayColor]colorWithAlphaComponent:0.3];

        [Cell.contentView addSubview:Line];

        // 平线

        

        UIView * LineTwo = [[UIView alloc]initWithFrame:CGRectMake(0, self.view.bounds.size.height-110, 30, 0.5)];

        LineTwo.backgroundColor = [[UIColor lightGrayColor]colorWithAlphaComponent:0.3];

        [Cell.contentView addSubview:LineTwo];

    }

    return Cell;

}

#pragma mark  创造数据

-(void)createDataPointArray{

    self.PointDataArray = [NSMutableArray arrayWithCapacity:0];

    for(int i = 0 ;i< 6 ;i++){

        NSMutableArray * TempPointArray = [NSMutableArray arrayWithCapacity:0];

        for (int i= 0; i<6; i++) {

            int x_point = arc4random()%100 + 30;

            int y_point = arc4random()%200+50;

            NSMutableDictionary * PointDict = [NSMutableDictionary dictionaryWithCapacity:0];

            [PointDict setObject:@(x_point) forKey:@"x"];

            [PointDict setObject:@(y_point) forKey:@"y"];

            [TempPointArray addObject:PointDict];

        }

        [self.PointDataArray addObject:TempPointArray];

    }

}

@end

重点代码：（友情提示：这里必须看）。

//

//  Coordinate_View.m

//  DataCoordinate

//

//  Created by 周双建 on 16/2/29.

//  Copyright © 2016年 周双建. All rights reserved.

//

#import "Coordinate_View.h"

@interface Coordinate_View(){

    @private

 // 水平坐标数据

    NSMutableArray * KLevelDataArray;

    // 绘制数据

    NSMutableArray * KPointArray;

}

@end

@implementation Coordinate_View

/*

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

 */

- (void)drawRect:(CGRect)rect {

    // 获取上下文,进行绘制

    CGContextRef ContextRef = UIGraphicsGetCurrentContext();

    // 开始绘制

    CGContextBeginPath(ContextRef);

    // 设置画笔

    CGContextSetLineWidth(ContextRef, 1);

    // 画线端点的样式

    CGContextSetLineCap(ContextRef, kCGLineCapSquare);

    // 线的颜色

    CGContextSetStrokeColorWithColor(ContextRef, [UIColor lightGrayColor].CGColor);

    for (int i =0 ; i<11; i++) {

        CGContextMoveToPoint(ContextRef, 0,i*self.frame.size.height/11);

        CGContextAddLineToPoint(ContextRef,self.frame.size.width-10,(self.frame.size.height/11)*i);

        CGContextStrokePath(ContextRef);

    }

    // 设置线的宽度

    for (int i= 0; i< 6; i++) {

        CGFloat lengths[] = {5,5};

        CGContextSetLineDash(ContextRef, 0, lengths, 2);

        CGContextMoveToPoint(ContextRef, i*self.frame.size.width/6, self.frame.size.height-50);

        CGContextAddLineToPoint(ContextRef, i*self.frame.size.width/6,0);

        CGContextStrokePath(ContextRef);

    }

    // 数据

    for (int i = 0 ; i<KLevelDataArray.count; i++) {

        UILabel * LevelLabel= [[UILabel alloc]initWithFrame:CGRectMake(i*((self.bounds.size.width)/KLevelDataArray.count)-15, self.bounds.size.height-45, 40, 10)];

        LevelLabel.text = KLevelDataArray[i];

        LevelLabel.textColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];

        LevelLabel.font = [UIFont systemFontOfSize:12];

        [ self addSubview:LevelLabel];

    }

    // 进行绘图

    

    switch ((int)self.LineType) {

        case PointType:{

            // 点

            CGContextSetStrokeColorWithColor(ContextRef, [UIColor blueColor].CGColor);

            for (int i =0 ; i< KPointArray.count; i++) {

                CGContextAddArc(ContextRef,[KPointArray[i][@"x"]floatValue], [KPointArray[i][@"y"]floatValue], 3, 0, M_1_PI, 6);

                CGContextFillPath(ContextRef);

            }

        }

            break;

        case BezierType:{

            // 贝塞尔

            CGContextSetLineCap(ContextRef, kCGLineCapSquare);

            CGContextSetStrokeColorWithColor(ContextRef, [UIColor blueColor].CGColor);

            CGContextMoveToPoint(ContextRef, 20 , 200);//设置Path的起点

            for (int i =0 ; i< KPointArray.count; i++) {

                CGContextAddQuadCurveToPoint(ContextRef,[KPointArray[i][@"x"]floatValue], [KPointArray[i][@"y"]floatValue], [KPointArray[KPointArray.count-1][@"x"]floatValue], [KPointArray[KPointArray.count-1][@"y"]floatValue]);//设置贝塞尔曲线的控制点坐标和终点坐标

            }

            CGContextStrokePath(ContextRef);

        }

            break;

        case BrokenType:{

            // 折线

            CGContextSetLineCap(ContextRef, kCGLineCapSquare);

            CGContextSetStrokeColorWithColor(ContextRef, [UIColor redColor].CGColor);

            CGContextMoveToPoint(ContextRef, 20 , 200);//设置Path的起点

            for (int i =0 ; i< KPointArray.count; i++) {

                CGContextAddLineToPoint(ContextRef, [KPointArray[i][@"x"]floatValue], [KPointArray[i][@"y"]floatValue]);

            }

            CGContextStrokePath(ContextRef);

        }

            break;

        default:

            break;

    }

    

}

-(void)setData:(NSMutableArray*)LevelDataArray{

    KLevelDataArray = LevelDataArray;

    NSLog(@"我的数据：%@",LevelDataArray);

}

-(void)setDataPoint:(NSMutableArray*)PointArray{

    KPointArray = PointArray;

    NSLog(@"我的数据点数：%@",KPointArray);

}

@end