iOS使用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 ,这个属性就是用来设置数据格式的，但比较麻烦的是这个属性必须遵循的协议，所以我们需要去自定义一个SymbolsValueFormatter类来完成

@interface SymbolsValueFormatter : NSObject//.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属性遵循协议，是id类型，找了好久终于发现ChartMarkerView和ChartMarkerImage都有遵循协议，都是可以用的，可以根据自己的需求自己选择

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 * _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类遵循协议，然后重写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];

}

精彩文章

 您阅读本篇文章共花了：