前言：由于項目(Swift項目與OC混編 OC控制器使用Charts)需要用到折線圖，之前用過PNChart感覺還不錯，引入后發(fā)現(xiàn)效果卻沒安卓的好（安卓使用MPAndroidChart），So最終決定引入Charts。盡管網(wǎng)上說引入后包會增大很多，但是為達目的我要不擇手段！
最終效果圖
-
pods引入（推薦）
-
手動引入
由于我們的項目未使用pods，所以下面我介紹一下手動引入時發(fā)現(xiàn)的坑。下面我以Charts 3.0.1版本為例，別問我為什么？因為我們的項目使用的是Swift 3.0，別問我為什么不升級？大佬們，我不敢??！小弟做不到??！
手動引入步驟
- 選擇基礎(chǔ)庫下載到本地
- 導入Charts到工程，并設(shè)置工程屬性
- 添加代碼，實現(xiàn)基本效果
- 運行程序，查看效果是否一致
- 修改，修改，修改
詳細步驟
1. 進入github地址，點擊Branch:master->Tags，選擇對應的版本，然后點擊右側(cè)紅色按鈕Clone or download->Download ZIP下載至本地
Charts地址
2. 導入Charts到工程，并設(shè)置工程屬性
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的值設(shè)置成YES
導入Charts.framework
3. 添加代碼，實現(xiàn)基本效果
3-1.在控制器.m頭文件中引入@import Charts;，初始化LineChartView，設(shè)置屬性
self.lineChartView=[[LineChartView alloc]initWithFrame:CGRectMake(0, 0, self.lineChartBgScroll.width, 200)];
[self.lineChartBgScroll addSubview:self.lineChartView];
//設(shè)置折線圖描述
self.lineChartView.noDataText=@"暫無數(shù)據(jù)"; //沒數(shù)據(jù)時顯示
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;//拖拽后慣性效果的摩擦系數(shù)(0~1),數(shù)值越小,慣性越不明顯
//設(shè)置X軸樣式
ChartXAxis *xAxis = self.lineChartView.xAxis;
xAxis.enabled = YES;
xAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;//設(shè)置X軸線寬
xAxis.labelPosition = XAxisLabelPositionBottom;//X軸的顯示位置，默認是顯示在上面的
xAxis.drawGridLinesEnabled = NO;//不繪制網(wǎng)格線
xAxis.drawLabelsEnabled = YES;
// xAxis.spaceBetweenLabels = 4;//設(shè)置label間隔
xAxis.labelTextColor = rgb(145, 148, 153);//label文字顏色
//設(shè)置Y軸樣式
self.lineChartView.rightAxis.enabled = NO;//不繪制右邊軸
ChartYAxis *leftAxis = self.lineChartView.leftAxis;//獲取左邊Y軸
leftAxis.labelCount = 6;//Y軸label數(shù)量，數(shù)值不一定，如果forceLabelsEnabled等于YES, 則強制繪制制定數(shù)量的label, 但是可能不平均
leftAxis.drawGridLinesEnabled = NO;
// leftAxis.drawAxisLineEnabled = NO;
leftAxis.forceLabelsEnabled = NO;//不強制繪制指定數(shù)量的label
// leftAxis.showOnlyMinMaxEnabled = NO;//是否只顯示最大值和最小值
leftAxis.axisMinimum = 0;//設(shè)置Y軸的最小值
leftAxis.drawZeroLineEnabled = YES;//從0開始繪制
// leftAxis.axisMaximum = 105;//設(shè)置Y軸的最大值
leftAxis.inverted = NO;//是否將Y軸進行上下翻轉(zhuǎn)
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.數(shù)據(jù)返回后添加數(shù)據(jù)
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++;
}
// 設(shè)置數(shù)據(jù)格式
self.lineChartView.xAxis.valueFormatter = [[ChartIndexAxisValueFormatter alloc] initWithValues:xLables];
// 設(shè)置x軸數(shù)據(jù)個數(shù) 不設(shè)置會出現(xiàn)多個重復數(shù)據(jù)
self.lineChartView.xAxis.labelCount = xLables.count;
// 設(shè)置x軸數(shù)據(jù)均勻排列 不設(shè)置會出現(xiàn)分布不均勻
self.lineChartView.xAxis.granularity = 1.0;
self.lineChartView.xAxis.granularityEnabled = YES;
LineChartDataSet *set1 = [[LineChartDataSet alloc] initWithValues:data01Array label:@"第一名"];
set1.axisDependency = AxisDependencyLeft;
set1.drawValuesEnabled = YES;//是否在拐點處顯示數(shù)據(jù)
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;//是否在拐點處顯示數(shù)據(jù)
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;//是否在拐點處顯示數(shù)據(jù)
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;//是否在拐點處顯示數(shù)據(jù)
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]];
// 設(shè)置y軸值所有點的數(shù)據(jù)格式
[data setValueFormatter:[[RBYPointFormatter alloc] init]];
// 設(shè)置x軸左右間距
self.lineChartView.xAxis.axisMinimum = data.xMin - 0.8;
self.lineChartView.xAxis.axisMaximum = data.xMax + 0.8;
self.lineChartView.data = data;
// 設(shè)置顯示最大最小范圍 超過可滑動 即設(shè)置滑動
[self.lineChartView setVisibleXRangeWithMinXRange:1 maxXRange:8];
// 顯示所有線條
[self.lineChartView animateWithXAxisDuration:0.5];
3-3.格式化x軸數(shù)據(jù)、y軸數(shù)據(jù)、y軸折線點值數(shù)據(jù)，創(chuàng)建model類，繼承NSObject，再新建一個類，分別遵守IChartAxisValueFormatter和IChartValueFormatter
.h
// y軸點數(shù)據(jù)格式化
@interface RBYPointFormatter : NSObject <IChartValueFormatter>
@end
// y軸數(shù)據(jù)格式化
@interface RBYAxisFormatter : NSObject <IChartAxisValueFormatter>
@end
設(shè)置數(shù)據(jù)格式
.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.均勻排布、左右間距和滑動設(shè)置
self.lineChartView.xAxis.labelCount = xLables.count;
// 設(shè)置x軸數(shù)據(jù)均勻排列 不設(shè)置會出現(xiàn)分布不均勻
self.lineChartView.xAxis.granularity = 1.0;
// 設(shè)置x軸左右間距
self.lineChartView.xAxis.axisMinimum = data.xMin - 0.8;
self.lineChartView.xAxis.axisMaximum = data.xMax + 0.8;
self.lineChartView.data = data;
// 設(shè)置顯示最大最小范圍 超過可滑動 即設(shè)置滑動
[self.lineChartView setVisibleXRangeWithMinXRange:1 maxXRange:8];
2.如果這時候你發(fā)現(xiàn)你的工程Scheme運行的設(shè)備多出了My Mac和Build Only decices多出了Generic tcOS device
多平臺Scheme
解決方案：
由于我是導入Charts庫后出現(xiàn)的該問題，所以我進到Charts的工程設(shè)置
1.Build Setting->TARGET->Architectures->Base SDK，將macOS修改為iOS
修改Base SDK
2.Build Setting->TARGET->Architectures->Supported Plateforms，將tvOS修改為iOS
修改Supported Plateforms
網(wǎng)上的其他解決方案（解決不能顯示真機或模擬器，只顯示My Mac）
關(guān)閉Xcode，找到該工程項目目錄，找到該項目的***.xcodeproj 文件，然后右鍵點擊選擇“顯示包內(nèi)容”；包內(nèi)容中會顯示以下三項：project.pbxproj ，project.xcworkspace ，xcuserdata ，xcshareddata（不能刪除這個，多人開發(fā)會用到）接著選擇“xcuserdata”這個文件夾，將其整個移到廢紙簍，重新打開你的項目，則可使用真機或模擬器；如果上述方法沒有用,在可以再Build Setting->TARGET->Architectures->Base SDK版本即可。
修改之后不顯示My Mac
