iOS 基于charts 实现货币交易的深度图

这几年虚拟货币交易的大热，对深度图和k线图的需求增多。今天就介绍一个基于charts来实现深度图控件，话不多说，先看效果。

以ETC/BTC为例.png

实现思路

• 集成charts：推荐cocospod。
• 深度图实现思路一般都是买入卖出，比如现在有10个买入，10个卖出，那么再charts上面开始划线，一条是买入一条是卖出，买入从最高到最低，卖出从最低到最最高，现在两条线都是十条数据，放进去会发现，中间接不上，会有一个沟 ，但是不怕，咱们可以在两条线的数据上面都放上一个最低成交价的数据，那样第一条线的最后一条数据和第二条线的第一条数据是一样的，那样就解决了重合的问题。
• 开始上代码
  1.初始化LineChartView。

_lineView = [[LineChartView alloc] initWithFrame:CGRectMake(10, 0 , SCREEN_WIDTH-20, 300)];
    _lineView.delegate = self;//设置代理
    _lineView.backgroundColor =  [UIColor clearColor];
    _lineView.noDataText = Localized(@"暂无数据");
    _lineView.noDataTextColor = [UIColor whiteColor];
    _lineView.chartDescription.enabled = NO;
    _lineView.scaleYEnabled = NO;//取消Y轴缩放
    _lineView.doubleTapToZoomEnabled = NO;//取消双击缩放
    _lineView.dragEnabled = YES;//启用拖拽图标
    [_lineView setVisibleXRangeMinimum:4];
    _lineView.dragDecelerationEnabled = NO;//拖拽后是否有惯性效果
    _lineView.dragDecelerationFrictionCoef = 0.9;//拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显
    _lineView.rightAxis.enabled = YES;//不绘制右边轴
    _lineView.rightAxis.axisLineColor = [UIColor clearColor];
    _lineView.rightAxis.labelTextColor = [UIColor clearColor];
    _lineView.rightAxis.xOffset = 0;
    _lineView.leftAxis.xOffset = 15;
    _lineView.leftAxis.enabled = YES;//不绘制右边轴
    _lineView.drawBordersEnabled = NO;
    _lineView.borderColor =[UIColor clearColor];
    
    ChartYAxis *leftAxis = _lineView.rightAxis;//获取左边Y轴
    leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字体
    leftAxis.drawGridLinesEnabled = NO;
    leftAxis.drawAxisLineEnabled = NO;
    leftAxis.labelTextColor = RGBCOLOR(150, 150, 150);//文字颜色
    leftAxis.gridColor = [UIColor whiteColor];
    leftAxis.valueFormatter = [[SymbolsValueFormatter alloc]init];
    leftAxis.labelPosition = YAxisLabelPositionInsideChart;//label位置
    
    ChartYAxis *rightAxis = _lineView.leftAxis;//获取左边Y轴
    rightAxis.enabled = NO;
    
    ChartXAxis *xAxis = _lineView.xAxis;
    xAxis.granularityEnabled = YES;//设置重复的值不显示
    [xAxis setGranularity:1];
    xAxis.labelPosition= XAxisLabelPositionBottom;//设置x轴数据在底部
    xAxis.gridColor = [UIColor clearColor];
    xAxis.labelTextColor = [UIColor whiteColor];//文字颜色
    xAxis.axisLineColor = [UIColor clearColor];
    xAxis.drawGridLinesEnabled = NO;
    xAxis.drawAxisLineEnabled = NO;
    xAxis.labelCount = 4;
    _lineView.legend.enabled = NO;
    _lineView.legend.formSize = 14;
    _lineView.legend.form = ChartLegendFormLine;
    
    [_lineView animateWithXAxisDuration:1.0f];
    [self.shenduView addSubview:_lineView];

2.获取需要显示的数据
3.拿到数据之后setData

NSMutableArray *xVals = [[NSMutableArray alloc] initWithCapacity:0];
    NSMutableArray *yVals = [[NSMutableArray alloc] initWithCapacity:0];
    NSMutableArray *xsellVals = [[NSMutableArray alloc] initWithCapacity:0];
    NSMutableArray *ysellVals = [[NSMutableArray alloc] initWithCapacity:0];
    NSDictionary *dic = [self.dataDic objectForKey:@"bid0"];
    NSArray *sellarr = [dic objectForKey:@"sells"];
    NSArray *buyarr = [dic objectForKey:@"buys"];
    NSDictionary *tradedic = [dic objectForKey:@"trade"];
    NSMutableArray *buyothe = [NSMutableArray arrayWithCapacity:0];
    NSString *firstTradestr = [NSString stringWithFormat:@"%@",[tradedic objectForKey:@"price"]];
    float  tradevolume = [[tradedic objectForKey:@"volume"]floatValue];
    float allvo = 0.0 ;
    float allsellvo = 0.0 ;
     [xVals addObject:firstTradestr];
    [buyothe addObject:[NSString stringWithFormat:@"%f",tradevolume]];
    for (int i = 0; i 

4.以上代码随便写了一下，经供参考。
5.demo就不放了，如有任何问题加QQ：63668956详聊。
6.下个文章写一下推荐的k线图的库