前言：由于项目(Swift项目与OC混编 OC控制器使用Charts)需要用到折线图，之前用过PNChart感觉还不错，引入后发现效果却没安卓的好（安卓使用MPAndroidChart），So最终决定引入Charts。尽管网上说引入后包会增大很多，但是为达目的我要不择手段！
最终效果图
-
pods引入（推荐）
-
手动引入
由于我们的项目未使用pods，所以下面我介绍一下手动引入时发现的坑。下面我以Charts 3.0.1版本为例，别问我为什么？因为我们的项目使用的是Swift 3.0，别问我为什么不升级？大佬们，我不敢啊！小弟做不到啊！
手动引入步骤
- 选择基础库下载到本地
- 导入Charts到工程，并设置工程属性
- 添加代码，实现基本效果
- 运行程序，查看效果是否一致
- 修改，修改，修改
详细步骤
1. 进入github地址，点击Branch:master->Tags，选择对应的版本，然后点击右侧红色按钮Clone or download->Download ZIP下载至本地
Charts地址
2. 导入Charts到工程，并设置工程属性
2-1.将下载下来的Charts.xcodeproj和Source文件保留，其余删除即可
Charts 3.0.1
2-2.将Charts文件夹拷贝至工程，右键工程，点击Add Files to “project name”，注意只添加Charts.xcodeproj
右键添加Charts到工程
2-3.点击工程->TARGETS->General -> Embedded Binaries -> + ,选择Charts.framework，导入framework；然后把Build Settings->Build Options->Always Embed Swift Standard Libraries的值设置成YES
导入Charts.framework
3. 添加代码，实现基本效果
3-1.在控制器.m头文件中引入@import Charts;，初始化LineChartView，设置属性
self.lineChartView=[[LineChartView alloc]initWithFrame:CGRectMake(0, 0, self.lineChartBgScroll.width, 200)];
[self.lineChartBgScroll addSubview:self.lineChartView];
//设置折线图描述
self.lineChartView.noDataText=@"暂无数据"; //没数据时显示
self.lineChartView.scaleYEnabled=NO; //启动Y轴缩放
self.lineChartView.scaleXEnabled=NO; //启动X轴缩放
self.lineChartView.doubleTapToZoomEnabled=NO; //取消双击缩放
// 隐藏折线图描述及图例样式
self.lineChartView.chartDescription.enabled = NO;
self.lineChartView.dragEnabled=YES; //启动拖拽图标
self.lineChartView.legend.enabled = NO; // 隐藏说明
self.lineChartView.dragDecelerationEnabled=YES; //拖拽后是否有惯性效果
self.lineChartView.dragDecelerationFrictionCoef = 0.9;//拖拽后惯性效果的摩擦系数(0~1),数值越小,惯性越不明显
//设置X轴样式
ChartXAxis *xAxis = self.lineChartView.xAxis;
xAxis.enabled = YES;
xAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;//设置X轴线宽
xAxis.labelPosition = XAxisLabelPositionBottom;//X轴的显示位置，默认是显示在上面的
xAxis.drawGridLinesEnabled = NO;//不绘制网格线
xAxis.drawLabelsEnabled = YES;
// xAxis.spaceBetweenLabels = 4;//设置label间隔
xAxis.labelTextColor = rgb(145, 148, 153);//label文字颜色
//设置Y轴样式
self.lineChartView.rightAxis.enabled = NO;//不绘制右边轴
ChartYAxis *leftAxis = self.lineChartView.leftAxis;//获取左边Y轴
leftAxis.labelCount = 6;//Y轴label数量，数值不一定，如果forceLabelsEnabled等于YES, 则强制绘制制定数量的label, 但是可能不平均
leftAxis.drawGridLinesEnabled = NO;
// leftAxis.drawAxisLineEnabled = NO;
leftAxis.forceLabelsEnabled = NO;//不强制绘制指定数量的label
// leftAxis.showOnlyMinMaxEnabled = NO;//是否只显示最大值和最小值
leftAxis.axisMinimum = 0;//设置Y轴的最小值
leftAxis.drawZeroLineEnabled = YES;//从0开始绘制
// leftAxis.axisMaximum = 105;//设置Y轴的最大值
leftAxis.inverted = NO;//是否将Y轴进行上下翻转
leftAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;//Y轴线宽
leftAxis.axisLineColor = [UIColor blackColor];//Y轴颜色
leftAxis.valueFormatter = [[RBYAxisFormatter alloc] init];//自定义格式
leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置
leftAxis.labelTextColor =[UIColor blackColor];//文字颜色
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字体
3-2.数据返回后添加数据
if (self.dataArray.count == 0) {
return;
}
NSMutableArray *xLables = [NSMutableArray arrayWithCapacity:0];
NSMutableArray *data01Array = [NSMutableArray arrayWithCapacity:0];
NSMutableArray *data02Array = [NSMutableArray arrayWithCapacity:0];
NSMutableArray *data03Array = [NSMutableArray arrayWithCapacity:0];
NSMutableArray *data04Array = [NSMutableArray arrayWithCapacity:0];
int i = 0;
for (NSDictionary *dic in self.dataArray) {
[xLables addObject:[dic[@"promotetime"] substringFromIndex:5]];
NSString *priceStr = dic[@"priceStr"];
NSArray *priceArray = [priceStr componentsSeparatedByString:@","];
ChartDataEntry *entry1 = [[ChartDataEntry alloc] initWithX:i y:[priceArray.firstObject doubleValue]];
[data01Array addObject:entry1];
ChartDataEntry *entry2 = [[ChartDataEntry alloc] initWithX:i y:[priceArray[1] doubleValue]];
[data02Array addObject:entry2];
ChartDataEntry *entry3 = [[ChartDataEntry alloc] initWithX:i y:[priceArray[2] doubleValue]];
[data03Array addObject:entry3];
ChartDataEntry *entry4 = [[ChartDataEntry alloc] initWithX:i y:[priceArray.lastObject doubleValue]];
[data04Array addObject:entry4];
i++;
}
// 设置数据格式
self.lineChartView.xAxis.valueFormatter = [[ChartIndexAxisValueFormatter alloc] initWithValues:xLables];
// 设置x轴数据个数 不设置会出现多个重复数据
self.lineChartView.xAxis.labelCount = xLables.count;
// 设置x轴数据均匀排列 不设置会出现分布不均匀
self.lineChartView.xAxis.granularity = 1.0;
self.lineChartView.xAxis.granularityEnabled = YES;
LineChartDataSet *set1 = [[LineChartDataSet alloc] initWithValues:data01Array label:@"第一名"];
set1.axisDependency = AxisDependencyLeft;
set1.drawValuesEnabled = YES;//是否在拐点处显示数据
set1.valueTextColor = rgb(255, 153, 170);
set1.lineWidth = 1.5;
set1.fillAlpha = 1;
[set1 setColor:rgb(255, 153, 170)];
set1.fillColor = rgb(255, 153, 170);
set1.highlightColor = [UIColor colorWithRed:224/255.0 green:117/255.0 blue:117/255.0 alpha:1.0];
set1.drawCirclesEnabled = NO;
set1.drawCircleHoleEnabled = NO;
LineChartDataSet *set2 = [[LineChartDataSet alloc] initWithValues:data02Array label:@"第二名"];
set2.axisDependency = AxisDependencyLeft;
set2.drawValuesEnabled = YES;//是否在拐点处显示数据
set2.valueTextColor = rgb(179, 204, 255);
set2.lineWidth = 1.5;
set2.drawCirclesEnabled = NO;
set2.fillAlpha = 0.26;
[set2 setColor:rgb(179, 204, 255)];
set2.fillColor = [UIColor colorWithRed:51/255.0 green:181/255.0 blue:229/255.0 alpha:1.0];
set2.highlightColor = [UIColor colorWithRed:224/255.0 green:117/255.0 blue:117/255.0 alpha:1.0];
set2.drawCircleHoleEnabled = NO;
LineChartDataSet *set3 = [[LineChartDataSet alloc] initWithValues:data03Array label:@"第三名"];
set3.axisDependency = AxisDependencyLeft;
set3.drawValuesEnabled = YES;//是否在拐点处显示数据
set3.valueTextColor = rgb(255, 204, 153);
set3.lineWidth = 1.5;
set3.drawCirclesEnabled = NO;
set3.fillAlpha = 0.26;
[set3 setColor:rgb(255, 204, 153)];
set3.fillColor = [UIColor colorWithRed:51/255.0 green:181/255.0 blue:229/255.0 alpha:1.0];
set3.highlightColor = [UIColor colorWithRed:224/255.0 green:117/255.0 blue:117/255.0 alpha:1.0];
set3.drawCircleHoleEnabled = NO;
LineChartDataSet *set4 = [[LineChartDataSet alloc] initWithValues:data04Array label:@"我"];
set4.axisDependency = AxisDependencyLeft;
set4.drawValuesEnabled = YES;//是否在拐点处显示数据
set4.valueTextColor = rgb(28, 188, 66);
set4.lineWidth = 1.5;
set4.drawCirclesEnabled = NO;
set4.fillAlpha = 0.26;
[set4 setColor:rgb(28, 188, 66)];
set4.fillColor = [UIColor colorWithRed:51/255.0 green:181/255.0 blue:229/255.0 alpha:1.0];
set4.highlightColor = [UIColor colorWithRed:224/255.0 green:117/255.0 blue:117/255.0 alpha:1.0];
set4.drawCircleHoleEnabled = NO;
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
[dataSets addObject:set2];
[dataSets addObject:set3];
[dataSets addObject:set4];
LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
[data setValueFont:[UIFont systemFontOfSize:10]];
// 设置y轴值所有点的数据格式
[data setValueFormatter:[[RBYPointFormatter alloc] init]];
// 设置x轴左右间距
self.lineChartView.xAxis.axisMinimum = data.xMin - 0.8;
self.lineChartView.xAxis.axisMaximum = data.xMax + 0.8;
self.lineChartView.data = data;
// 设置显示最大最小范围 超过可滑动 即设置滑动
[self.lineChartView setVisibleXRangeWithMinXRange:1 maxXRange:8];
// 显示所有线条
[self.lineChartView animateWithXAxisDuration:0.5];
3-3.格式化x轴数据、y轴数据、y轴折线点值数据，创建model类，继承NSObject，再新建一个类，分别遵守IChartAxisValueFormatter和IChartValueFormatter
.h
// y轴点数据格式化
@interface RBYPointFormatter : NSObject <IChartValueFormatter>
@end
// y轴数据格式化
@interface RBYAxisFormatter : NSObject <IChartAxisValueFormatter>
@end
设置数据格式
.m
@implementation RBYPointFormatter
- (NSString *)stringForValue:(double)value entry:(ChartDataEntry *)entry dataSetIndex:(NSInteger)dataSetIndex viewPortHandler:(ChartViewPortHandler *)viewPortHandler {
return [NSString stringWithFormat:@"%.2f",value];
}
@end
@implementation RBYAxisFormatter
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {
return [NSString stringWithFormat:@"￥%.2f",value];
}
@end
使用
leftAxis.valueFormatter = [[RBYAxisFormatter alloc] init];//自定义格式
最终效果图
注意：
1.均匀排布、左右间距和滑动设置
self.lineChartView.xAxis.labelCount = xLables.count;
// 设置x轴数据均匀排列 不设置会出现分布不均匀
self.lineChartView.xAxis.granularity = 1.0;
// 设置x轴左右间距
self.lineChartView.xAxis.axisMinimum = data.xMin - 0.8;
self.lineChartView.xAxis.axisMaximum = data.xMax + 0.8;
self.lineChartView.data = data;
// 设置显示最大最小范围 超过可滑动 即设置滑动
[self.lineChartView setVisibleXRangeWithMinXRange:1 maxXRange:8];
2.如果这时候你发现你的工程Scheme运行的设备多出了My Mac和Build Only decices多出了Generic tcOS device
多平台Scheme
解决方案：
由于我是导入Charts库后出现的该问题，所以我进到Charts的工程设置
1.Build Setting->TARGET->Architectures->Base SDK，将macOS修改为iOS
修改Base SDK
2.Build Setting->TARGET->Architectures->Supported Plateforms，将tvOS修改为iOS
修改Supported Plateforms
网上的其他解决方案（解决不能显示真机或模拟器，只显示My Mac）
关闭Xcode，找到该工程项目目录，找到该项目的***.xcodeproj 文件，然后右键点击选择“显示包内容”；包内容中会显示以下三项：project.pbxproj ，project.xcworkspace ，xcuserdata ，xcshareddata（不能删除这个，多人开发会用到）接着选择“xcuserdata”这个文件夹，将其整个移到废纸篓，重新打开你的项目，则可使用真机或模拟器；如果上述方法没有用,在可以再Build Setting->TARGET->Architectures->Base SDK版本即可。
修改之后不显示My Mac
