最近，朋友让我给他做个demo，主要是实现一个股票走向的数据的展示功能，所谓智者当借力而行，直接百度搜索到了比较好用的图表类的第三方叫Charts，话不多说，下面介绍一些基本的使用方法。
一、关于如何导入Charts到OC项目中
1.Charts的导入，使用Cocoapod的直接pod search一下Charts，直接放到podfile，再更新一下库，使用过cocoapod得应该都会，话不多说，当然不用cocoapod的也可以直接下载Charts导入工程。
2.由于Charts使用的是swift来实现的，很多人使用OC较多（包括本人）所以在OC项目中使用Charts就需要使用桥接：
（1）具体步骤，在工程里创建一个swift的类，随便起名字之后文件也可以删除，之后XCode会自动提示是否创建桥接文件，点击是，然后再在桥接文件里面@import charts
（2）然后再需要使用charts的文件里像是引入普通的头文件一样引入这个桥接文件，当然也可以放入项目的PCH里。
（3）然后就可以当做OC的类一样使用charts进行创建对象，使用方法等等。
二、具体使用
图例1如图所示，我们需要实现一个折线图，显示两组数据，具体步骤和方法。
（1）完成了导入Charts之后，绘制折线图的类叫做LineChartView
初始化对象以及相关配置
- (LineChartView *)lineView {
if (!_lineView) {
_lineView = [[LineChartView alloc] initWithFrame:CGRectMake(0, 50,screenWidth-100 , screenHeight-200)];
_lineView.delegate = self;//设置代理
_lineView.backgroundColor = [UIColor whiteColor];
_lineView.noDataText = @"暂无数据";
_lineView.chartDescription.enabled = YES;
_lineView.scaleYEnabled = NO;//取消Y轴缩放
_lineView.scaleXEnabled = NO;
_lineView.doubleTapToZoomEnabled = NO;//取消双击缩放
_lineView.dragEnabled = NO;//启用拖拽图标
（2）绘制坐标轴及相关配置
ChartYAxis *leftAxis = _lineView.leftAxis;//获取左边Y轴
leftAxis.labelCount = 8;//Y轴label数量
leftAxis.forceLabelsEnabled = YES;//不强制绘制指定数量的label
leftAxis.axisMinValue = -84;//设置Y轴的最小值
leftAxis.axisMaxValue = 210;//设置Y轴的最大值
leftAxis.inverted = NO;//是否将Y轴进行上下翻转
leftAxis.axisLineColor = [UIColor blackColor];//Y轴颜色
leftAxis.valueFormatter = [[SymbolsValueFormatter alloc]init];
leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置
leftAxis.labelTextColor = [UIColor redColor];//文字颜色
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字体
leftAxis.gridColor = [UIColor clearColor];//网格线颜色
leftAxis.gridAntialiasEnabled = NO;//开启抗锯齿
ChartXAxis *xAxis = _lineView.xAxis;
xAxis.axisLineColor = [UIColor blackColor];
xAxis.drawLimitLinesBehindDataEnabled = NO;
xAxis.axisLineColor = [UIColor blackColor];
xAxis.enabled = YES;
xAxis.granularityEnabled = NO;//设置重复的值不显示
xAxis.labelPosition= XAxisLabelPositionBottom;//设置x轴数据在底部
xAxis.avoidFirstLastClippingEnabled = YES;
xAxis.labelCount = 4;
xAxis.forceLabelsEnabled = YES;
xAxis.gridColor = [UIColor clearColor];
xAxis.labelTextColor = [UIColor blackColor];//文字颜色
xAxis.axisLineColor = [UIColor grayColor];
（3）画每个轴上的label，以及实现折现点的连接
- (LineChartData *)setData{ NSInteger xVals_count = _dataArray.count;//X轴上要显示多少条数据 //X轴上面需要显示的数据 NSMutableArray *xVals = [[NSMutableArray alloc] init]; for (int i= 0; i0) {
LineChartData *data = (LineChartData *)_lineView.data;
set1 = (LineChartDataSet *)data.dataSets[0];
set1.values = yVals;
set1.valueFormatter = [[SetValueFormatter alloc]initWithArr:yVals];
return data;
}else{
//创建LineChartDataSet对象
set1 = [[LineChartDataSet alloc]initWithValues:yVals label:nil];
//设置折线的样式
set1.lineWidth = 2.0/[UIScreen mainScreen].scale;//折线宽度
set1.drawValuesEnabled = NO;//是否在拐点处显示数据
set1.valueFormatter = [[SetValueFormatter alloc]initWithArr:yVals];
set1.valueColors = @[[UIColor clearColor]];//折线拐点处显示数据的颜色
[set1 setColor:[UIColor blueColor]];//折线颜色
set1.highlightColor = [UIColor colorWithRed:146/255.0 green:175 /255.0 blue:194/255.0 alpha:1.0];
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++) {
WYTioModel *model = [WYTioModel tioModelWithDic:_dataArray[i]];
float a = model.BRATIO.floatValue;
ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:a];
[yVals2 addObject:entry];
}
LineChartDataSet *set2 = [set1 copy];
set2.values = yVals2;
set2.drawValuesEnabled = NO;
[set2 setColor:[UIColor colorWithRed:207/255.0 green:174 /255.0 blue:152/255.0 alpha:1.0]];
[dataSets addObject:set2];
//创建 LineChartData 对象, 此对象就是lineChartView需要最终数据对象
LineChartData *data = [[LineChartData alloc]initWithDataSets:dataSets];
[data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:11.f]];//文字字体
[data setValueTextColor:[UIColor clearColor]];//文字颜色
return data;
}
}
最终实现效果
实现后的竖屏效果图附上DEMO：（上传后改为超链接）
网友评论