iOS Charts框架集成及使用

最近公司项目中要加一个折线图的需求因为是金融项目考虑到后期可能会有大量的饼状和折线图的需求，仔细搜索一番觉得用个成熟的charts框架会比较好，最终决定用Charts，话不多说把自己踩过的坑放上来自己也做个笔记。

Charts   github地址：https://github.com/danielgindi/Charts

折线图：

Charts集成

导入charst框架，创建桥接文件

因为我的项目是oc编写，Charts是swift编写，首先得创建桥接文件

1、用的cocoapods客户端，直接上手导入charts框架

2、创建oc与swift桥接文件

任意创建一个swift的类点击finish，再点击Create Bridging Header，然后会发现项目中有了XXX-Bridging-Header类，在此类中引入头文件@import Charts。最后在Build Settings中将Swift Language Version选为4.0，为了后面我们的气泡使用。

Charts使用

1、ViewController导入头文件，导入Delegate<IChartAxisValueFormatter,IChartValueFormatter>

2、创建折线图

- (void)initLineChartView{

    //创建折线图

    _linechartView =  [[LineChartViewalloc]init];

    _linechartView.frame = CGRectMake(10, 60, ScreenWidth - 20, 260);

    _linechartView.legend.form = ChartLegendFormNone;   //说明图标         _linechartView.dragEnabled = NO;      //拖动手势         _linechartView.pinchZoomEnabled = NO;      //捏合手势         _linechartView.rightAxis.enabled = NO;      //隐藏右Y轴         _linechartView.chartDescription.enabled = NO;      //不显示描述label         _linechartView.doubleTapToZoomEnabled = NO;      //禁止双击缩放      _linechartView.drawGridBackgroundEnabled = NO;         _linechartView.drawBordersEnabled        = NO;  

      _linechartView.dragEnabled               = YES;     //拖动气泡

    [_linechartView animateWithXAxisDuration:2.20                                 easingOption:ChartEasingOptionEaseOutBack];   //加载动画时长

  [self.view addSubview:_linechartView];

}

3、y轴，x轴

- (void)initLineChartViewWithLeftaxisMaxValue:(double)maxValue MinValue:(double)minValue{

    //气泡

    BalloonMarker*marker = [[BalloonMarkeralloc]initWithColor:[UIColororangeColor]font: [UIFontsystemFontOfSize:10]textColor:UIColor.whiteColorinsets:UIEdgeInsetsMake(9.0,8.0,20.0,8.0)];

    marker.bubbleImg =  [UIImageimageNamed:@"chartqipaoBubble"];

    marker.chartView = _linechartView;

    marker.minimumSize = CGSizeMake(50.f,25.f);

    _linechartView.marker = marker;

    //设置左Y轴

    ChartYAxis*leftAxis = _linechartView.leftAxis;[leftAxisremoveAllLimitLines];

    leftAxis.axisMaxValue =  maxValue;     //设置Y轴的最大值

    leftAxis.axisMinValue = 0.00;    //设置Y轴的最小值

    leftAxis.axisLineWidth = 1;

    leftAxis.labelCount=5;     //y轴展示多少个

    labelleftAxis.labelFont = [UIFontsystemFontOfSize:12];

    leftAxis.labelTextColor = [UIColorlightGrayColor];

    leftAxis.axisLineColor = [UIColorlightGrayColor];    //左Y轴线条颜色

    leftAxis.gridColor = [UIColorlightGrayColor];

    leftAxis.zeroLineColor = [UIColorlightGrayColor];    //左Y轴底线条颜色

    leftAxis.drawZeroLineEnabled = YES;

    leftAxis.drawLimitLinesBehindDataEnabled = YES;

    // 设置X轴

    ChartXAxis*xAxis =_linechartView.xAxis;

    xAxis.axisLineColor = [UIColorlightGrayColor];

    xAxis.labelPosition =  XAxisLabelPositionBottom;

    xAxis.labelFont = [UIFontsystemFontOfSize:12];

    xAxis.labelTextColor = [UIColorlightGrayColor];

    xAxis.axisMinValue = -0.3;     // label间距

    xAxis.granularity = 1.0;

    xAxis.drawAxisLineEnabled = NO;    //是否画x轴线

    xAxis.drawGridLinesEnabled = NO;    //是否画网格

}

4、数据

- (void)initLineChartDataWithXvalueArr:(NSArray*)xValueArr YvlueArr:(NSArray*)yValueArr{

    _xValueArr = xValueArr;    // 设置x轴折线数据 （模拟数据）

    _yValueArr = yValueArr;    // 设置y轴折线数据 （模拟数据）

    _chart_YmaxValue = [[_yValueArrvalueForKeyPath:@"@max.doubleValue"]doubleValue];    //最大值

    _chart_YminValue = [[_yValueArrvalueForKeyPath:@"@min.doubleValue"]doubleValue];     //最小值

    if(_chart_YmaxValue<0.03&& (_chart_YminValue==_chart_YmaxValue)){

        _scale = 10;

    }else if(_chart_YminValue==_chart_YmaxValue){

        _scale = 2;

    }else{

        _scale = 1;

}

    [selfinitLineChartViewWithLeftaxisMaxValue:_chart_YmaxValueMinValue:_chart_YminValue]; //引入

    //chartView设置X轴数据（日期）

    if(_xValueArr.count>0) {

    _linechartView.xAxis.axisMaxValue = (double)xValueArr.count-1+0.3;

    _linechartView.xAxis.valueFormatter =  [[ChartIndexAxisValueFormatteralloc]initWithValues:xValueArr];

}

    // 创建数据集数组

    NSMutableArray*dataSets = [[NSMutableArrayalloc]init];

    LineChartDataSet*set = [selfdrawLineWithArr:yValueArrtitle:nilcolor:[UIColororangeColor]];

    if(set) {

        [dataSetsaddObject:set];    // 赋值数据集数组

    }

    LineChartData*data = [[LineChartDataalloc]initWithDataSets:dataSets];

    _linechartView.data = data;

}

5、delegate调用，IChartValueFormatter delegate，根据数据数组 title color 创建折线set

- (LineChartDataSet *)drawLineWithArr:(NSArray *)arr title:(NSString *)title color:(UIColor *)color {   

      if (arr.count == 0) {        

        return nil;    

    }    

    // 处理折线数据 

    NSMutableArray *statistics = [NSMutableArray array];  

    double leftAxisMin = 0;    

    double leftAxisMax = 0;    

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

           NSString *num = arr[i];        

           double temp   = [num doubleValue];     

           double value  = [self roundFloat:temp];        

           leftAxisMax   = MAX(value, leftAxisMax);      

           leftAxisMin   = MIN(value, leftAxisMin);      

           [statistics addObject:[[ChartDataEntry alloc] initWithX:i y:value]];  

      }              

    CGFloat topNum = leftAxisMax * (5.0/4.0);   

     if (leftAxisMax ==  leftAxisMin) {   

             _linechartView.leftAxis.axisMaxValue = 10;  

  }else{               

            _linechartView.leftAxis.axisMaxValue = topNum * _scale;  

  }            

      if (leftAxisMin < 0) {  

          CGFloat minNum = leftAxisMin * (5.0/4.0);  

          _linechartView.leftAxis.axisMinValue = minNum ;  

      }              

       // 设置Y轴数据  

      _linechartView.leftAxis.valueFormatter = self; //需要遵IChartAxisValueFormatter协议    

    // 设置折线数据  

      LineChartDataSet *chartDataSet  = nil;  

      chartDataSet = [[LineChartDataSet alloc] initWithValues:statistics label:title];    

      [chartDataSet setColor:color];      //折线颜色         

     chartDataSet.valueFont = [UIFont systemFontOfSize:12];     //折线字体大小                 

     chartDataSet.valueFormatter = self;   //需要遵循IChartValueFormatter协议    

      chartDataSet.lineWidth = 1.0f;    //折线宽度  

      chartDataSet.valueColors = @[color];     //折线拐点处显示数据的颜色    

      chartDataSet.drawCirclesEnabled = NO;    //是否绘制拐点    

      chartDataSet.axisDependency = AxisDependencyLeft;     //轴线方向  

      chartDataSet.highlightColor = [UIColor clearColor];    //选中线条颜色    

      chartDataSet.highlightLineWidth = 1.00f;    

      chartDataSet.drawCircleHoleEnabled = YES;     //是否绘制中间的空心    

      // chartDataSet.circleHoleRadius = 2.0f;     //空心的半径  

      // chartDataSet.circleHoleColor = WKOrangeColor;     //空心的颜色     

     chartDataSet.drawFilledEnabled = YES;//是否填充颜色  

     NSArray *gradientColors = @[(id)[ChartColorTemplates colorFromString:@"#ffffff"].CGColor,                                 (id)[ChartColorTemplates colorFromString:@"#f9511e"].CGColor];    

    CGGradientRef gradientRef = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil);  

    chartDataSet.fillAlpha = 0.7f;//透明度    

    chartDataSet.fill = [ChartFill fillWithLinearGradient:gradientRef angle:90.0f]; //赋值填充颜色对象    

    CGGradientRelease(gradientRef);       

     return chartDataSet;

}

#pragma mark - IChartValueFormatter delegate (折线值)

- (NSString *)stringForValue:(double)value entry:(ChartDataEntry *)entry dataSetIndex:(NSInteger)dataSetIndex viewPortHandler:(ChartViewPortHandler *)viewPortHandler {         

    return nil;    

    // return [NSString stringWithFormat:@"%@", value];

}

#pragma mark - IChartAxisValueFormatter delegate (y轴值) (x轴的值写在DateValueFormatter类里, 都是这个协议方法)

- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {       

      if (ABS(value) > 1000) {        

        return [NSString stringWithFormat:@"%.1fk", value/(double)1000];    

}         

        return [NSString stringWithFormat:@"%0.2f", value];

}

6、ViewController调用

关于气泡

从github上下载charts源码，从里边找到BalloonMarker的类然后add进自己的项目里，我的气泡是UI给的图，所以还需要在BalloonMarker里修改下（前面已经将工程中swift版本设置为4.0版本，不然BalloonMarker里的NSAttributedStringKey会报错）

初始化Chart默认选中位置显示气泡

//默认选中气泡

    NSString *lastValue = _yValueArr.lastObject;  

      [_linechartView highlightValueWithX:_xValueArr.count-1  y:[lastValue doubleValue]  dataSetIndex:0 callDelegate:NO];

根据需求找到图片红框内的代码行数自行修改即可

---

最后，这只是charts其中的一个折线功能使用，里边还有K线图、泡泡图、雷达图、柱状图等等，还可混合成复合图表如炒股的盯盘图表，就不一一表述了，网上也有很多资料可自行查找