公司的项目要使用到折线图，然后用的是第三方Charts框架，不得不说Charts很强大的一个第三方，几乎所有你想要的功能都可以做到，刚开始使用的时候很多功能没有找到，比如只标记最高点，滑动的时候数值变化等等，下面是简单的效果示意图。
charts.gif
现在我们开始一步一步来实现图中的效果吧。
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
