關(guān)于Charts制作數(shù)據(jù)類折線圖的相關(guān)使用

最近,朋友讓我給他做個(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ì)象,使用方法等等。

二、具體使用


圖例1

如圖所示,我們需要實(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)效果

實(shí)現(xiàn)后的豎屏效果圖


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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容