iOS使用Charts框架绘制折线图

公司的项目要使用到折线图，然后用的是第三方Charts框架，不得不说Charts很强大的一个第三方，几乎所有你想要的功能都可以做到，刚开始使用的时候很多功能没有找到，比如只标记最高点，滑动的时候数值变化等等，下面是简单的效果示意图。

现在我们开始一步一步来实现图中的效果吧。

LineChartView属性设置

在控制器中我们首先需要创建一个LineChartView的对象，在Charts框架中折线图用到的类是LineChartView.h

   _lineView = [[LineChartView alloc] initWithFrame:CGRectMake(0, 50, screenWidth, screenHeight-200)];
    _lineView.delegate = self;//设置代理
    _lineView.backgroundColor =  [UIColor whiteColor];
    _lineView.noDataText = @"暂无数据";
    _lineView.chartDescription.enabled = YES;
    _lineView.scaleYEnabled = NO;//取消Y轴缩放
    _lineView.doubleTapToZoomEnabled = NO;//取消双击缩放
    _lineView.dragEnabled = YES;//启用拖拽图标
    _lineView.dragDecelerationEnabled = YES;//拖拽后是否有惯性效果
    _lineView.dragDecelerationFrictionCoef = 0.9;//拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显 
   //描述及图例样式
    [_lineView setDescriptionText:@""];
    _lineView.legend.enabled = NO;
    [_lineView animateWithXAxisDuration:1.0f];

在LineChartView中有两个属性rightAxis和 leftAxis属于ChartYAxis类，是分别用来设置左边Y轴和右边Y轴的，可以根据自己的需求去设置。

   _lineView.rightAxis.enabled = NO;//不绘制右边轴
    ChartYAxis *leftAxis = _lineView.leftAxis;//获取左边Y轴
    leftAxis.labelCount = 5;//Y轴label数量，数值不一定，如果forceLabelsEnabled等于YES, 则强制绘制制定数量的label, 但是可能不平均
    leftAxis.forceLabelsEnabled = NO;//不强制绘制指定数量的label
    // leftAxis.axisMinValue = 0;//设置Y轴的最小值
    //leftAxis.axisMaxValue = 105;//设置Y轴的最大值
    leftAxis.inverted = NO;//是否将Y轴进行上下翻转
    leftAxis.axisLineColor = [UIColor clearColor];//Y轴颜色
    leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置
    leftAxis.labelTextColor = [UIColor blackColor];//文字颜色
    leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字体
    leftAxis.gridColor = [UIColor grayColor];//网格线颜色
    leftAxis.gridAntialiasEnabled = NO;//开启抗锯齿
    leftAxis.valueFormatter = [[SymbolsValueFormatter alloc]init];//设置y轴的数据格式

在这里要注意的是，一般情况下y轴的数据是double类型的并且是没有特殊符号的，如果想要做到像图中的那样的百分数类型是要去设置的，然后我们发现ChartYAxis类中有一个属性valueFormatter ,这个属性就是用来设置数据格式的，但比较麻烦的是这个属性必须遵循<IChartAxisValueFormatter>的协议，所以我们需要去自定义一个SymbolsValueFormatter类来完成

 @interface SymbolsValueFormatter : NSObject<IChartAxisValueFormatter>//.h文件

在.m的代理方法中

 -(id)init{
if (self = [super init]) {
    
}
return self;}
 -(NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis
{ 
return [NSString stringWithFormat:@"%ld%%",(NSInteger)value];
}//IChartAxisValueFormatter的代理方法

y轴设置完了，现在我们来设置x轴，在 LineChartView中也有个属性xAxis使用来设置x轴的样式的，它属于ChartXAxis类，现在我们来创建它

   ChartXAxis *xAxis = _lineView.xAxis;
    xAxis.granularityEnabled = YES;//设置重复的值不显示
    xAxis.labelPosition= XAxisLabelPositionBottom;//设置x轴数据在底部
    xAxis.gridColor = [UIColor clearColor];
    xAxis.labelTextColor = [UIColor blackColor];//文字颜色
    xAxis.axisLineColor = [UIColor grayColor];
    _lineView.maxVisibleCount = 999;//设置能够显示的数据数量

到这里我们_lineView的x轴和y轴都设置好了，但是还少了一个选中数据滑动的时候值会变化的标签， LineChartView中有个marker属性就是我们要找的，marker属性遵循<IChartMarker>协议，是id类型，找了好久终于发现ChartMarkerView和ChartMarkerImage都有遵循<IChartMarker>协议，都是可以用的，可以根据自己的需求自己选择

    ChartMarkerView *markerY = [[ChartMarkerView alloc]init];
    markerY.offset = CGPointMake(-999, -8);
    markerY.chartView = _lineView;
    _lineView.marker = markerY;
    [markerY addSubview:self.markY];
//懒加载
- (UILabel *)markY{
if (!_markY) {
    _markY = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 35, 25)];
    _markY.font = [UIFont systemFontOfSize:15.0];
    _markY.textAlignment = NSTextAlignmentCenter;
    _markY.text =@"";
    _markY.textColor = [UIColor whiteColor];
    _markY.backgroundColor = [UIColor grayColor];
}
return _markY;
}

LineChartView数据设置

 self.lineView.data = [self setData];  //设置折线图的数据

折线图的数据data属性是属于LineChartData类，所以setData方法需要返回一个LineChartData的对象，但是在LineChartData的对象的初始化方法中- (nonnull instancetype)initWithDataSets:(NSArray<id <IChartDataSet>> * _Nullable)dataSets发现还需要一个装有LineChartDataSet的数组，LineChartDataSet其实就是每一条折线，而绘制每一条折线又需要数据，所以我们先从数据开始一步一步创建。

  NSInteger xVals_count = 50;//X轴上要显示多少条数据
//X轴上面需要显示的数据
NSMutableArray *xVals = [[NSMutableArray alloc] init];

for (int i = 1; i <= xVals_count; i++) {
    if (i<30) {
    [xVals addObject: [NSString stringWithFormat:@"02-%d",i]];
    }else{
    [xVals addObject: [NSString stringWithFormat:@"03-%d",i-29]];
    }
}
_lineView.xAxis.valueFormatter = [[DateValueFormatter alloc]initWithArr:xVals];

上面创建的是模拟日期的格式，从02-1到03-21，x轴默认的数据格式也是double类型，所以我们需要像上面取设置y轴的数据格式那样来设置x轴的日期，我们新建DateValueFormatter类遵循<IChartAxisValueFormatter>协议，然后重写init方法，将x轴的数组传过去，在DateValueFormatter类中定义一个全局数组，在协议方法中去返回数据

-(id)initWithArr:(NSArray *)arr{
self = [super init];
if (self)
{
    _arr = arr;
    
}
return self;
}
-(NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis
{
return _arr[(NSInteger)value];
}

x轴的数据设置完，我们需要来设置Y轴的数据了,因为是两条折线图，所以我们需要两个数组数据

//对应Y轴上面需要显示的数据
NSMutableArray *yVals = [[NSMutableArray alloc] init];
for (int i = 0; i < xVals_count; i++) {
    int a = arc4random() % 100;
    ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:a];
    [yVals addObject:entry];
}
NSMutableArray *yVals2 = [[NSMutableArray alloc] init];
    for (int i = 0; i <  xVals_count; i++) {
        int a = arc4random() % 80;
        ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:a];
        [yVals2 addObject:entry];
    }

数据完成后，我们就要来创建折线了，创建两个LineChartDataSet对象其中有一个对象是要返回最高点的值，所以要设置valueFormatter和前面的一样，重写了init方法

 set1 = [[LineChartDataSet alloc]initWithValues:yVals label:nil];
    //设置折线的样式
    set1.lineWidth = 2.0/[UIScreen mainScreen].scale;//折线宽度
    
    set1.drawValuesEnabled = YES;//是否在拐点处显示数据
    set1.valueFormatter = [[SetValueFormatter alloc]initWithArr:yVals];
    
    set1.valueColors = @[[UIColor brownColor]];//折线拐点处显示数据的颜色
    
    [set1 setColor:[UIColor greenColor]];//折线颜色
    set1.highlightColor = [UIColor redColor];
    set1.drawSteppedEnabled = NO;//是否开启绘制阶梯样式的折线图
    //折线拐点样式
    set1.drawCirclesEnabled = NO;//是否绘制拐点
    set1.drawFilledEnabled = NO;//是否填充颜色
    //将 LineChartDataSet 对象放入数组中
    NSMutableArray *dataSets = [[NSMutableArray alloc] init];
    [dataSets addObject:set1];
    
    //添加第二个LineChartDataSet对象
    
    NSMutableArray *yVals2 = [[NSMutableArray alloc] init];
    for (int i = 0; i <  xVals_count; i++) {
        int a = arc4random() % 80;
        ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:a];
        [yVals2 addObject:entry];
    }
    LineChartDataSet *set2 = [set1 copy];
    set2.values = yVals2;
    set2.drawValuesEnabled = NO;
    [set2 setColor:[UIColor blueColor]];
    
    [dataSets addObject:set2];

SetValueFormatter.h和前面的一样要继承协议,.m文件中定义了两个全局属性一个数组和一个记录最大值。

-(id)initWithArr:(NSArray *)arr{
self = [super init];
if (self)
{
    _arr = arr;
    NSMutableArray * muArr = [NSMutableArray arrayWithArray:arr];
    [muArr sortUsingComparator:^NSComparisonResult(id  _Nonnull obj1, id  _Nonnull obj2) {
        ChartDataEntry * entry1 =(ChartDataEntry *)obj1;
        ChartDataEntry * entry2 =(ChartDataEntry *)obj2;
        if (entry1.y >= entry2.y){
            return NSOrderedAscending;
        }else{
            return NSOrderedDescending;
        }
    }];
    _AAAdataSetIndex =((ChartDataEntry * )muArr[0]).x;
}
return self;
}

-(NSString * _Nonnull)stringForValue:(double)value entry:(ChartDataEntry * _Nonnull)entry dataSetIndex:(NSInteger)dataSetIndex viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler{
//    NSLog(@"value:%f----entry:%@------dataSetIndex:%ld-------viewPortHandler:%@",value,[entry modelToJSONString],(long)dataSetIndex,[viewPortHandler modelToJSONString]);
if (entry.x==_AAAdataSetIndex) {
    return [NSString stringWithFormat:@"%ld%%",(NSInteger)entry.y];
}else{
    return @"";
}
}

这样写好就会只有最高值显示，其他都显示@""
前面两个LineChartDataSet对象都添加进了数组，接下来我们就可以创建LineChartData对象，然后返回就可以了

  //创建 LineChartData 对象, 此对象就是lineChartView需要最终数据对象
    LineChartData *data = [[LineChartData alloc]initWithDataSets:dataSets];
    
    [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:11.f]];//文字字体
    [data setValueTextColor:[UIColor blackColor]];//文字颜色
    
    
    return data;

最后还有个ChartView的选中数据代理方法，主要用来显示选中折线数据的时候label值的变化

  - (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView entry:(ChartDataEntry * _Nonnull)entry highlight:(ChartHighlight * _Nonnull)highlight {

_markY.text = [NSString stringWithFormat:@"%ld%%",(NSInteger)entry.y];//改变选中的数据时候，label的值跟着变化
//将点击的数据滑动到中间
[_lineView centerViewToAnimatedWithXValue:entry.x yValue:entry.y axis:[_lineView.data getDataSetByIndex:highlight.dataSetIndex].axisDependency duration:1.0];

 }

最后附上demo链接ChartsDemo