iOS使用Charts框架繪制餅狀圖
首先先看一下效果:
餅狀圖
一、創(chuàng)建餅狀圖對(duì)象
創(chuàng)建餅狀圖對(duì)象用到類是PieChartView.h, 代碼如下:
self.pieChartView = [[PieChartView alloc] init]; self.pieChartView.backgroundColor = BgColor; [self.view addSubview:self.pieChartView]; [self.pieChartView mas_makeConstraints:^(MASConstraintMaker *make) { make.size.mas_equalTo(CGSizeMake(300, 300)); make.center.mas_equalTo(self.view); }];
二、設(shè)置餅狀圖外觀樣式
1. 基本樣式
[self.pieChartView setExtraOffsetsWithLeft:30 top:0 right:30 bottom:0];//餅狀圖距離邊緣的間隙 self.pieChartView.usePercentValuesEnabled = YES;//是否根據(jù)所提供的數(shù)據(jù), 將顯示數(shù)據(jù)轉(zhuǎn)換為百分比格式 self.pieChartView.dragDecelerationEnabled = YES;//拖拽餅狀圖后是否有慣性效果 self.pieChartView.drawSliceTextEnabled = YES;//是否顯示區(qū)塊文本
2. 設(shè)置餅狀圖中間的空心樣式
空心有兩個(gè)圓組成, 一個(gè)是hole, 一個(gè)是transparentCircle, transparentCircle里面是hole, 所以餅狀圖中間的空心也就是一個(gè)同心圓. 代碼如下:
self.pieChartView.drawHoleEnabled = YES;//餅狀圖是否是空心 self.pieChartView.holeRadiusPercent = 0.5;//空心半徑占比 self.pieChartView.holeColor = [UIColor clearColor];//空心顏色 self.pieChartView.transparentCircleRadiusPercent = 0.52;//半透明空心半徑占比 self.pieChartView.transparentCircleColor = [UIColor colorWithRed:210/255.0 green:145/255.0 blue:165/255.0 alpha:0.3];//半透明空心的顏色
3. 設(shè)置餅狀圖中心的文本
當(dāng)餅狀圖是空心樣式時(shí), 可以在餅狀圖中心添加文本, 添加文本有兩種方法. 一種方法是使用centerText 屬性添加, 這種方法不能設(shè)置字體顏色、大小等. 另一種方法是使用centerAttributedText屬性添加, 這種方法添加的富文本, 因此就可以對(duì)字體進(jìn)行進(jìn)一步美化了. 代碼如下:
if (self.pieChartView.isDrawHoleEnabled == YES) { self.pieChartView.drawCenterTextEnabled = YES;//是否顯示中間文字 //普通文本 // self.pieChartView.centerText = @"餅狀圖";//中間文字 //富文本 NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"餅狀圖"]; [centerText setAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:16], NSForegroundColorAttributeName: [UIColor orangeColor]} range:NSMakeRange(0, centerText.length)]; self.pieChartView.centerAttributedText = centerText; }
4. 設(shè)置餅狀圖描述
self.pieChartView.descriptionText = @"餅狀圖示例"; self.pieChartView.descriptionFont = [UIFont systemFontOfSize:10]; self.pieChartView.descriptionTextColor = [UIColor grayColor];
6. 設(shè)置餅狀圖圖例樣式
self.pieChartView.legend.maxSizePercent = 1;//圖例在餅狀圖中的大小占比, 這會(huì)影響圖例的寬高 self.pieChartView.legend.formToTextSpace = 5;//文本間隔 self.pieChartView.legend.font = [UIFont systemFontOfSize:10];//字體大小 self.pieChartView.legend.textColor = [UIColor grayColor];//字體顏色 self.pieChartView.legend.position = ChartLegendPositionBelowChartCenter;//圖例在餅狀圖中的位置 self.pieChartView.legend.form = ChartLegendFormCircle;//圖示樣式: 方形、線條、圓形 self.pieChartView.legend.formSize = 12;//圖示大小
三、為餅狀圖提供數(shù)據(jù)
為餅狀圖提供數(shù)據(jù), 首先需要?jiǎng)?chuàng)建兩個(gè)數(shù)組yVals和xVals, yVals數(shù)組存放餅狀圖每個(gè)區(qū)塊的數(shù)據(jù), xVals存放的是每個(gè)區(qū)塊的名稱或者描述.
接著需要用PieChartDataSet.h類創(chuàng)建dataSet對(duì)象, 創(chuàng)建時(shí)將yVals放進(jìn)去.
然后需要用PieChartData.h類創(chuàng)建data對(duì)象, 創(chuàng)建時(shí)將xVals和dataSet對(duì)象放進(jìn)去.
最后直接把data對(duì)象賦值給餅狀圖的data屬性即可. 創(chuàng)建data對(duì)象代碼如下:
- (PieChartData *)setData{ double mult = 100; int count = 5;//餅狀圖總共有幾塊組成 //每個(gè)區(qū)塊的數(shù)據(jù) NSMutableArray *yVals = [[NSMutableArray alloc] init]; for (int i = 0; i < count; i++) { double randomVal = arc4random_uniform(mult + 1); BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithValue:randomVal xIndex:i]; [yVals addObject:entry]; } //每個(gè)區(qū)塊的名稱或描述 NSMutableArray *xVals = [[NSMutableArray alloc] init]; for (int i = 0; i < count; i++) { NSString *title = [NSString stringWithFormat:@"part%d", i+1]; [xVals addObject:title]; } //dataSet PieChartDataSet *dataSet = [[PieChartDataSet alloc] initWithYVals:yVals label:@""]; dataSet.drawValuesEnabled = YES;//是否繪制顯示數(shù)據(jù) NSMutableArray *colors = [[NSMutableArray alloc] init]; [colors addObjectsFromArray:ChartColorTemplates.vordiplom]; [colors addObjectsFromArray:ChartColorTemplates.joyful]; [colors addObjectsFromArray:ChartColorTemplates.colorful]; [colors addObjectsFromArray:ChartColorTemplates.liberty]; [colors addObjectsFromArray:ChartColorTemplates.pastel]; [colors addObject:[UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f]]; dataSet.colors = colors;//區(qū)塊顏色 dataSet.sliceSpace = 0;//相鄰區(qū)塊之間的間距 dataSet.selectionShift = 8;//選中區(qū)塊時(shí), 放大的半徑 dataSet.xValuePosition = PieChartValuePositionInsideSlice;//名稱位置 dataSet.yValuePosition = PieChartValuePositionOutsideSlice;//數(shù)據(jù)位置 //數(shù)據(jù)與區(qū)塊之間的用于指示的折線樣式 dataSet.valueLinePart1OffsetPercentage = 0.85;//折線中第一段起始位置相對(duì)于區(qū)塊的偏移量, 數(shù)值越大, 折線距離區(qū)塊越遠(yuǎn) dataSet.valueLinePart1Length = 0.5;//折線中第一段長度占比 dataSet.valueLinePart2Length = 0.4;//折線中第二段長度最大占比 dataSet.valueLineWidth = 1;//折線的粗細(xì) dataSet.valueLineColor = [UIColor brownColor];//折線顏色 //data PieChartData *data = [[PieChartData alloc] initWithXVals:xVals dataSet:dataSet]; NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init]; formatter.numberStyle = NSNumberFormatterPercentStyle; formatter.maximumFractionDigits = 0;//小數(shù)位數(shù) formatter.multiplier = @1.f; [data setValueFormatter:formatter];//設(shè)置顯示數(shù)據(jù)格式 [data setValueTextColor:[UIColor brownColor]]; [data setValueFont:[UIFont systemFontOfSize:10]]; return data; }
運(yùn)行結(jié)果如下:
運(yùn)行結(jié)果
如果不需要空心樣式的餅狀圖, 可以將餅狀圖的drawHoleEnabled賦值為NO, 將中間的文本去掉即可, 代碼如下:
self.pieChartView.drawHoleEnabled = NO;
效果如下:
實(shí)心餅狀圖
每個(gè)區(qū)塊之間如果需要間距, 可以通過dataSet對(duì)象的sliceSpace屬性設(shè)置, 代碼如下:
dataSet.sliceSpace = 3;
效果如下:
有區(qū)塊間距的餅狀圖
由于屬性較多, 其它效果可以自行嘗試.
Demo 下載地址: http://xiazai.jb51.net/201612/yuanma/PieChartDemo-master_jb51.rar
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
iOS 點(diǎn)擊推送消息跳到應(yīng)用指定頁面的實(shí)例
這篇文章主要介紹了iOS 點(diǎn)擊推送消息跳到應(yīng)用指定頁面的實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-11-11Objective-C中類和方法的定義以及協(xié)議的使用
這篇文章主要介紹了Objective-C中類和方法的定義以及協(xié)議的使用,配合Mac下的Xcode IDE進(jìn)行講解,需要的朋友可以參考下2016-01-01WKWebview非全屏自動(dòng)播放h5視頻的實(shí)現(xiàn)方法(Swift、OC)
這篇文章主要給大家介紹了關(guān)于WKWebview非全屏自動(dòng)播放h5視頻的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05IOS中用正則表達(dá)式判斷輸入的內(nèi)容為8-16位且同時(shí)包含數(shù)字和字母
這篇文章主要介紹了IOS中用正則表達(dá)式判斷輸入的內(nèi)容為8-16位且同時(shí)包含數(shù)字和字母,需要的朋友可以參考下2017-06-06IOS程序開發(fā)之禁止輸入表情符號(hào)實(shí)例代碼
如何禁止輸入表情符號(hào)呢?下面腳本之家小編給大家分享IOS程序開發(fā)之禁止輸入表情符號(hào)實(shí)例代碼,感興趣的朋友參考下吧2016-04-04iOS適配iPhone XS、 iPhone XS Max and iPhone XR的方法淺析
這篇文章主要給大家介紹了關(guān)于iOS適配iPhone XS、 iPhone XS Max and iPhone XR的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09