上篇文章寫了如何導(dǎo)入Charts
這篇講講PieChartView的使用
PieChartView 可以實(shí)現(xiàn) 不帶折線的餅狀圖队丝、帶折線的餅狀圖
效果圖如下
本文使用的masonry布局，初始化餅狀圖時(shí)昭娩，由內(nèi)而外的設(shè)置相關(guān)屬性暴凑，分為如下幾個(gè)部分：
1峦甩、中間的文本
2、同心圓
3现喳、扇形區(qū)塊
4凯傲、圖例（左下角的那一坨）
5、餅狀圖的名字（未顯示）
一嗦篱、創(chuàng)建PieChartView對(duì)象
PieChartView *chartView = [[PieChartView alloc]init];
[self.view addSubview:chartView];
[chartView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(chartView.superview.mas_centerY);
make.left.equalTo(chartView.superview).offset(10);
make.right.equalTo(chartView.superview).offset(-10);
make.height.equalTo(chartView.mas_width);
}];
二冰单、設(shè)置餅狀圖樣式
1、基本樣式
/* 基本樣式 */
chartView.delegate = self;//設(shè)置代理
[chartView setExtraOffsetsWithLeft:5.f top:5.f right:5.f bottom:5.f];//餅狀圖距離邊緣的間隙
chartView.usePercentValuesEnabled = YES; //是否根據(jù)所提供的數(shù)據(jù), 將顯示數(shù)據(jù)轉(zhuǎn)換為百分比格式
chartView.dragDecelerationEnabled = YES;//拖拽餅狀圖后是否有慣性效果
2灸促、餅狀圖中間的文本
chartView.centerText = @"我是中心這句代碼設(shè)置中間文本的文字诫欠，默認(rèn)為黑色,設(shè)置中間文本的字體涵卵、顏色屬性沒有找到（找到了的同胞可以留言），要設(shè)置字體荒叼、顏色可以通過centerAttributedText這個(gè)富文本屬性代替
/* 設(shè)置餅狀圖中間的文本 */
chartView.drawCenterTextEnabled = YES;//是否繪制中間的文本
// chartView.centerText = @"我是中心";//中間文本的文字轿偎，默認(rèn)為灰色,設(shè)置中間文本的字體、顏色屬性沒有找到被廓，可以用centerAttributedText代替
NSString *text = @"我是中心";
NSMutableAttributedString *attribute = [[NSMutableAttributedString alloc] initWithString:text];
NSDictionary *dic = @{NSForegroundColorAttributeName : [UIColor cyanColor],NSFontAttributeName : [UIFont systemFontOfSize:20]};
[attribute setAttributes:dic range:NSMakeRange(0, text.length)];
chartView.centerAttributedText = attribute;
3坏晦、餅狀圖中間的同心圓
chartView.drawHoleEnabled = NO，不展示同心圓嫁乘，此時(shí)兩個(gè)同心圓都消失昆婿，如果只想要一個(gè)同心圓，就將holeRadiusPercent,transparentCircleRadiusPercent兩個(gè)值設(shè)置為一樣
/* 設(shè)置餅狀圖中間的同心圓 */
chartView.drawHoleEnabled = YES; //餅狀圖是否是空心圓,設(shè)置為NO之后亦渗，半透明空心圓也消失咯
chartView.holeRadiusPercent = 0.35;//第一個(gè)空心圓半徑占比
chartView.holeColor = [UIColor whiteColor];//第一個(gè)空心圓顏色
chartView.transparentCircleRadiusPercent = 0.38;//第二個(gè)空心圓半徑占比，半徑占比和第一個(gè)空心圓半徑占比設(shè)置為一樣的時(shí)候汁尺，只有一個(gè)圓咯
chartView.transparentCircleColor = UIColorFromHex(0xf1f1f1);//第二個(gè)空心圓顏色
4法精、餅狀圖扇形區(qū)塊文本
drawEntryLabelsEnabled這個(gè)屬性是用來顯示上圖情況1、情況2痴突、情況3搂蜓、情況4的，如果drawEntryLabelsEnabled = NO 就不能顯示文字咯
/* 設(shè)置餅狀圖扇形區(qū)塊文本*/
chartView.drawEntryLabelsEnabled = YES; //是否顯示扇形區(qū)塊文本描述
5辽装、沒有數(shù)據(jù)的顯示
/*餅狀圖沒有數(shù)據(jù)的顯示*/
chartView.noDataText = @"暫無數(shù)據(jù)";//沒有數(shù)據(jù)是顯示的文字說明
chartView.noDataTextColor = UIColorFromHex(0x21B7EF);//沒有數(shù)據(jù)時(shí)的文字顏色
chartView.noDataFont = [UIFont fontWithName:@"PingFangSC" size:15];//沒有數(shù)據(jù)時(shí)的文字字體
6帮碰、設(shè)置餅狀圖圖例樣式
如果不需要展示圖例，直接設(shè)置chartView.legend.enabled = NO
其他屬性都可以不用設(shè)置咯拾积，反正設(shè)置了也顯示不出來
/* 設(shè)置餅狀圖圖例樣式 */
chartView.legend.enabled = YES;//顯示餅狀圖圖例解釋說明
chartView.legend.maxSizePercent = 0.1;///圖例在餅狀圖中的大小占比, 這會(huì)影響圖例的寬高
chartView.legend.formToTextSpace = 10;//圖示和文字的間隔
chartView.legend.font = [UIFont systemFontOfSize:10];//圖例字體大小
chartView.legend.textColor = [UIColor blackColor];//圖例字體顏色
chartView.legend.form = ChartLegendFormSquare;//圖示樣式: 方形殉挽、線條、圓形
chartView.legend.formSize = 5;//圖示大小
7拓巧、餅狀圖的名字
chartView.chartDescription.enabled = NO所以沒有展示
/* 餅狀圖名字 */
chartView.chartDescription.enabled = NO; //是否顯示餅狀圖名字
chartView.chartDescription.text = @"我是餅狀圖名";//設(shè)置餅狀圖名字
chartView.chartDescription.textColor = [UIColor redColor];//設(shè)置餅狀圖名字顏色
chartView.chartDescription.textAlign = NSTextAlignmentLeft;//設(shè)置餅狀圖名字對(duì)齊方式
chartView.chartDescription.xOffset = 100;//餅狀圖名字x軸偏移
8斯碌、餅狀圖交互
chartView.rotationEnabled = YES 餅狀圖可以旋轉(zhuǎn)，設(shè)置為NO不可以旋轉(zhuǎn)
chartView.highlightPerTapEnabled = YES,每個(gè)扇形區(qū)塊可以點(diǎn)擊肛度，設(shè)置dataSet.selectionShift = 8（這個(gè)屬性具體如何設(shè)置會(huì)在下面看見傻唾，稍安勿躁~），點(diǎn)擊后扇形區(qū)塊變大承耿，點(diǎn)擊后還會(huì)走(void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight這個(gè)代理方法（也會(huì)在下面解釋哦~）
/*餅狀圖交互*/
chartView.rotationEnabled = YES;//是否可以選擇旋轉(zhuǎn)
chartView.highlightPerTapEnabled = YES;//每個(gè)扇形區(qū)塊是否可點(diǎn)擊
三冠骄、為餅狀圖提供數(shù)據(jù)
/* 為餅狀圖提供數(shù)據(jù) */
_numbers = @[@"10",@"20",@"30",@"40"];
_names = @[@"情況1",@"情況2",@"情況3",@"情況4"];
[self setPieData];
setPieData方法
將提供數(shù)據(jù)寫成一個(gè)方法的原因是:切換成折線圖的也要提供數(shù)，所以就封裝成一個(gè)方法了
PieChartDataEntry 每塊扇形的對(duì)象加袋，有很多種初始化方法凛辣，代碼里面寫了兩種，這個(gè)初始化方法里面的四個(gè)屬性解釋如下
1职烧、value : 扇形的數(shù)值, 如10
2蟀给、label : 扇形的文字描述蝙砌，如情況1
3、icon : 扇形的圖片
4跋理、data : 扇形的tag
PieChartDataSet相當(dāng)于數(shù)據(jù)源的感覺择克，初始化方法里的兩個(gè)屬性解釋如下
1、values ：裝有PieChartDataEntry對(duì)象的數(shù)組
2前普、label ：圖例的名字
然后設(shè)置每塊扇形的顏色肚邢，每塊扇形的間距，選中后的半徑變化dataSet.selectionShift = 8拭卿，扇形被選中后骡湖，增加8個(gè)像素的半徑，扇形區(qū)塊的圖片峻厚，文字描述响蕴，數(shù)值等相關(guān)屬性設(shè)置
self.isValueLine = NO 不帶折線圖的餅狀圖
self.isValueLine = YES 帶折線圖的餅狀圖
當(dāng)餅狀圖帶折線時(shí)，dataSet.yValuePosition 數(shù)值的位置只有設(shè)置為
PieChartValuePositionOutsideSlice惠桃，折線才會(huì)顯示浦夷，valueLine相關(guān)屬性才有用
valueFormatter數(shù)值顯示的格式,此處設(shè)置為百分比格式
rotationAngle 動(dòng)畫開始的角度，此時(shí)設(shè)置為從0度開始辜王，上面的gif可以看出來
餅狀圖動(dòng)畫效果為ChartEasingOptionEaseOutExpo
- (void)setPieData{
NSMutableArray *values = [[NSMutableArray alloc] init];
for (int i = 0; i < _numbers.count; i++){
/*
value : 每塊扇形的數(shù)值
label : 每塊扇形的文字描述
icon : 圖片
*/
[values addObject:[[PieChartDataEntry alloc]initWithValue:[_numbers[i] doubleValue] label:_names[i] icon:nil]];
/*
value : 每塊扇形的數(shù)值
label : 每塊扇形的文字描述
data : tag值
*/
// [values addObject:[[PieChartDataEntry alloc] initWithValue:[_numbers[i] doubleValue] label:_names[i] data:[NSString stringWithFormat:@"%d",i]]];
}
/*
圖例
values : values數(shù)組
label : 圖例的名字
*/
PieChartDataSet *dataSet = [[PieChartDataSet alloc] initWithValues:values label:@"圖例說明"];//圖例說明
/* 設(shè)置每塊扇形區(qū)塊的顏色 */
NSMutableArray *colors = [[NSMutableArray alloc] init];
[colors addObject:UIColorFromHex(0x7AAAD8)];
[colors addObject:UIColorFromHex(0xFFB22C)];
[colors addObject:UIColorFromHex(0x7ECBC3)];
[colors addObject:UIColorFromHex(0xB1ACDA)];
dataSet.colors = colors;
dataSet.sliceSpace = 5; //相鄰區(qū)塊之間的間距
dataSet.selectionShift = 8;//選中區(qū)塊時(shí), 放大的半徑
dataSet.drawIconsEnabled = NO; //扇形區(qū)塊是否顯示圖片
dataSet.entryLabelColor = [UIColor redColor];//每塊扇形文字描述的顏色
dataSet.entryLabelFont = [UIFont systemFontOfSize:15];//每塊扇形的文字字體大小
dataSet.drawValuesEnabled = YES;//是否顯示每塊扇形的數(shù)值
dataSet.valueFont = [UIFont systemFontOfSize:11];//每塊扇形數(shù)值的字體大小
dataSet.valueColors = @[[UIColor redColor],[UIColor cyanColor],[UIColor greenColor],[UIColor grayColor]];//每塊扇形數(shù)值的顏色,如果數(shù)值顏色要一樣劈狐，就設(shè)置一個(gè)色就好了
if (self.isValueLine) {
/* 數(shù)值與區(qū)塊之間的用于指示的折線樣式*/
dataSet.xValuePosition = PieChartValuePositionInsideSlice;//文字的位置
dataSet.yValuePosition = PieChartValuePositionOutsideSlice;//數(shù)值的位置，只有在外面的時(shí)候呐馆，折線才有用
dataSet.valueLinePart1OffsetPercentage = 0.8; //折線中第一段起始位置相對(duì)于區(qū)塊的偏移量, 數(shù)值越大, 折線距離區(qū)塊越遠(yuǎn)
dataSet.valueLinePart1Length = 0.4;//折線中第一段長(zhǎng)度占比
dataSet.valueLinePart2Length = 0.6;//折線中第二段長(zhǎng)度占比
dataSet.valueLineWidth = 1;//折線的粗細(xì)
dataSet.valueLineColor = [UIColor brownColor];//折線顏色
}
//設(shè)置每塊扇形數(shù)值的格式
NSNumberFormatter *pFormatter = [[NSNumberFormatter alloc] init];
pFormatter.numberStyle = NSNumberFormatterPercentStyle;
pFormatter.maximumFractionDigits = 1;
pFormatter.multiplier = @1.f;
pFormatter.percentSymbol = @" %";
dataSet.valueFormatter = [[ChartDefaultValueFormatter alloc] initWithFormatter:pFormatter];
PieChartData *data = [[PieChartData alloc] initWithDataSet:dataSet];
self.chartView.data = data;
/* 設(shè)置餅狀圖動(dòng)畫 */
self.chartView.rotationAngle = 0.0;//動(dòng)畫開始時(shí)的角度在0度
[self.chartView animateWithXAxisDuration:2.0f easingOption:ChartEasingOptionEaseOutExpo];//設(shè)置動(dòng)畫效果
}
button的點(diǎn)擊事件
- (void)respondsToButton:(UIButton *)sender{
sender.selected = !sender.selected;
[sender setTitle:sender.selected == YES ? @"設(shè)置為不帶折線的餅狀圖" :@"設(shè)置為帶折線的餅狀圖" forState:UIControlStateNormal];
self.isValueLine = sender.selected;
[self setPieData];
}
到此效果圖就實(shí)現(xiàn)咯~~~
四肥缔、ChartViewDelegate代理
ChartViewDelegate里面有4個(gè)方法，當(dāng)我們選擇某個(gè)扇形塊后汹来，會(huì)調(diào)用(void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight這個(gè)方法（前提chartView.highlightPerTapEnabled = YES）
我們?cè)趺创_定到底選擇了哪一塊呢续膳？
/*
value : 每塊扇形的數(shù)值
label : 每塊扇形的文字描述
icon : 圖片
*/
[values addObject:[[PieChartDataEntry alloc]initWithValue:[_numbers[i] doubleValue] label:_names[i] icon:nil]];
初始化PieChartDataEntry，我們傳入了每塊扇形的數(shù)值收班、文字描述姑宽、扇形上的圖片
當(dāng)我們點(diǎn)擊情況1，輸出 entry.x = 0闺阱，entry.y = 10
當(dāng)我們點(diǎn)擊情況2炮车，輸出 entry.x = 0，entry.y = 20
當(dāng)我們點(diǎn)擊情況3酣溃，輸出 entry.x = 0瘦穆，entry.y = 30
當(dāng)我們點(diǎn)擊情況4，輸出 entry.x = 0赊豌，entry.y = 40
可見扛或，entry.y就是我們傳入的數(shù)值，但是憑借這個(gè)值進(jìn)行判斷并不可靠碘饼，萬一我們傳入的值是一樣的呢熙兔？
所以此時(shí)初始化values換一種方式,用tag值來唯一標(biāo)識(shí)
/*
value : 每塊扇形的數(shù)值
label : 每塊扇形的文字描述
data : tag值
*/
[values addObject:[[PieChartDataEntry alloc] initWithValue:[_numbers[i] doubleValue] label:_names[i] data:[NSString stringWithFormat:@"%d",i]]];
代理方法如下
- (void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight{
NSLog(@"chartValueSelected");
//當(dāng)前選中餅狀圖的值
NSLog(@"---chartValueSelected---value: x = %g,y = %g",entry.x, entry.y);
//當(dāng)前選中餅狀圖的index
NSLog(@"---chartValueSelected---value:第 %@ 個(gè)數(shù)據(jù)", entry.data);
}
打印輸出值如下悲伶，這樣子就能確定點(diǎn)擊的哪一塊扇形了~
最后附上demo地址
參考博客
iOS開發(fā) - Charts（PieChartView）使用經(jīng)驗(yàn)
iOS使用Charts框架繪制—餅狀圖
文章鏈接
3、BarChartView實(shí)現(xiàn)橫向條形統(tǒng)計(jì)圖和縱向條形統(tǒng)計(jì)圖
喜歡就點(diǎn)個(gè)贊吧????
有錯(cuò)之處住涉，還請(qǐng)指出麸锉，感謝????
