最近,朋友讓我給他做個(gè)demo,主要是實(shí)現(xiàn)一個(gè)股票走向的數(shù)據(jù)的展示功能,所謂智者當(dāng)借力而行,直接百度搜索到了比較好用的圖表類的第三方叫Charts,話不多說(shuō),下面介紹一些基本的使用方法。
一、關(guān)于如何導(dǎo)入Charts到OC項(xiàng)目中
1.Charts的導(dǎo)入,使用Cocoapod的直接pod search一下Charts,直接放到podfile,再更新一下庫(kù),使用過(guò)cocoapod得應(yīng)該都會(huì),話不多說(shuō),當(dāng)然不用cocoapod的也可以直接下載Charts導(dǎo)入工程。
2.由于Charts使用的是swift來(lái)實(shí)現(xiàn)的,很多人使用OC較多(包括本人)所以在OC項(xiàng)目中使用Charts就需要使用橋接:
(1)具體步驟,在工程里創(chuàng)建一個(gè)swift的類,隨便起名字之后文件也可以刪除,之后XCode會(huì)自動(dòng)提示是否創(chuàng)建橋接文件,點(diǎn)擊是,然后再在橋接文件里面@import charts
(2)然后再需要使用charts的文件里像是引入普通的頭文件一樣引入這個(gè)橋接文件,當(dāng)然也可以放入項(xiàng)目的PCH里。
(3)然后就可以當(dāng)做OC的類一樣使用charts進(jìn)行創(chuàng)建對(duì)象,使用方法等等。
二、具體使用

如圖所示,我們需要實(shí)現(xiàn)一個(gè)折線圖,顯示兩組數(shù)據(jù),具體步驟和方法。
(1)完成了導(dǎo)入Charts之后,繪制折線圖的類叫做LineChartView
初始化對(duì)象以及相關(guān)配置
- (LineChartView *)lineView {
if (!_lineView) {
_lineView = [[LineChartView alloc] initWithFrame:CGRectMake(0, 50,screenWidth-100 , screenHeight-200)];
_lineView.delegate = self;//設(shè)置代理
_lineView.backgroundColor =? [UIColor whiteColor];
_lineView.noDataText = @"暫無(wú)數(shù)據(jù)";
_lineView.chartDescription.enabled = YES;
_lineView.scaleYEnabled = NO;//取消Y軸縮放
_lineView.scaleXEnabled = NO;
_lineView.doubleTapToZoomEnabled = NO;//取消雙擊縮放
_lineView.dragEnabled = NO;//啟用拖拽圖標(biāo)
(2)繪制坐標(biāo)軸及相關(guān)配置
ChartYAxis *leftAxis = _lineView.leftAxis;//獲取左邊Y軸
leftAxis.labelCount = 8;//Y軸label數(shù)量
leftAxis.forceLabelsEnabled = YES;//不強(qiáng)制繪制指定數(shù)量的label
leftAxis.axisMinValue = -84;//設(shè)置Y軸的最小值
leftAxis.axisMaxValue = 210;//設(shè)置Y軸的最大值
leftAxis.inverted = NO;//是否將Y軸進(jìn)行上下翻轉(zhuǎn)
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];//網(wǎng)格線顏色
leftAxis.gridAntialiasEnabled = NO;//開(kāi)啟抗鋸齒
ChartXAxis *xAxis = _lineView.xAxis;
xAxis.axisLineColor = [UIColor blackColor];
xAxis.drawLimitLinesBehindDataEnabled = NO;
xAxis.axisLineColor = [UIColor blackColor];
xAxis.enabled = YES;
xAxis.granularityEnabled = NO;//設(shè)置重復(fù)的值不顯示
xAxis.labelPosition= XAxisLabelPositionBottom;//設(shè)置x軸數(shù)據(jù)在底部
xAxis.avoidFirstLastClippingEnabled = YES;
xAxis.labelCount = 4;
xAxis.forceLabelsEnabled = YES;
xAxis.gridColor = [UIColor clearColor];
xAxis.labelTextColor = [UIColor blackColor];//文字顏色
xAxis.axisLineColor = [UIColor grayColor];
(3)畫每個(gè)軸上的label,以及實(shí)現(xiàn)折現(xiàn)點(diǎn)的連接
- (LineChartData *)setData{? ? ? ? NSInteger xVals_count = _dataArray.count;//X軸上要顯示多少條數(shù)據(jù)? ? //X軸上面需要顯示的數(shù)據(jù)? ? 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{
//創(chuàng)建LineChartDataSet對(duì)象
set1 = [[LineChartDataSet alloc]initWithValues:yVals label:nil];
//設(shè)置折線的樣式
set1.lineWidth = 2.0/[UIScreen mainScreen].scale;//折線寬度
set1.drawValuesEnabled = NO;//是否在拐點(diǎn)處顯示數(shù)據(jù)
set1.valueFormatter = [[SetValueFormatter alloc]initWithArr:yVals];
set1.valueColors = @[[UIColor clearColor]];//折線拐點(diǎn)處顯示數(shù)據(jù)的顏色
[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;//是否開(kāi)啟繪制階梯樣式的折線圖
//折線拐點(diǎn)樣式
set1.drawCirclesEnabled = NO;//是否繪制拐點(diǎn)
set1.drawFilledEnabled = NO;//是否填充顏色
//將 LineChartDataSet 對(duì)象放入數(shù)組中
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
//添加第二個(gè)LineChartDataSet對(duì)象
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];
//創(chuàng)建 LineChartData 對(duì)象, 此對(duì)象就是lineChartView需要最終數(shù)據(jù)對(duì)象
LineChartData *data = [[LineChartData alloc]initWithDataSets:dataSets];
[data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:11.f]];//文字字體
[data setValueTextColor:[UIColor clearColor]];//文字顏色
return data;
}
}
最終實(shí)現(xiàn)效果

附上DEMO:(上傳后改為超鏈接)