iOS 는 Charts 프레임 워 크 를 사용 하여 떡 모양 그림 을 그립 니 다.

우선 효 과 를 살 펴 보 자.

떡 모양 도
1.떡 모양 그림 대상 만 들 기
떡 모양 그림 을 만 드 는 데 사용 되 는 종 류 는 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);
}];

2.떡 모양 그림 모양 설정
1.기본 스타일

[self.pieChartView setExtraOffsetsWithLeft:30 top:0 right:30 bottom:0];//          
self.pieChartView.usePercentValuesEnabled = YES;//          ,              
self.pieChartView.dragDecelerationEnabled = YES;//             
self.pieChartView.drawSliceTextEnabled = YES;//        

2.떡 모양 그림 가운데 빈 모양 설정
중 공 은 두 개의 원 으로 구성 되 어 있 으 며,하 나 는 hole 이 고,하 나 는 transparent Circle 이 며,transparent Circle 안 은 hole 이기 때문에 떡 모양 그림 중간의 중 공 은 하나의 동심원 입 니 다.코드 는 다음 과 같 습 니 다.

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.떡 모양 그림 센터 의 텍스트 설정
떡 모양 그림 이 빈 모양 일 때 떡 모양 그림 중심 에 텍스트 를 추가 할 수 있 습 니 다.텍스트 를 추가 하 는 방법 은 두 가지 가 있 습 니 다.한 가지 방법 은 centerText 속성 으로 추가 하 는 것 입 니 다.이 방법 은 글꼴 색상,크기 등 을 설정 할 수 없습니다.다른 방법 은 centerAttributed Text 속성 으로 추가 하 는 것 입 니 다.이 방법 은 부 텍스트 를 추가 하 는 것 이기 때문에 글꼴 을 더욱 미화 할 수 있 습 니 다.코드 는 다음 과 같 습 니 다.

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.떡 모양 그림 설정

self.pieChartView.descriptionText = @"     ";
self.pieChartView.descriptionFont = [UIFont systemFontOfSize:10];
self.pieChartView.descriptionTextColor = [UIColor grayColor];

6.떡 모양 그림 스타일 설정

self.pieChartView.legend.maxSizePercent = 1;//            ,          
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;//    

3.떡 모양 그림 에 데 이 터 를 제공 합 니 다.
떡 모양 그림 에 데 이 터 를 제공 하려 면 먼저 두 개의 배열 yVals 와 xVals 를 만들어 야 합 니 다.yVals 배열 은 떡 모양 그림 각 블록 의 데 이 터 를 저장 하고 xVals 는 각 블록 의 이름 이나 설명 을 저장 합 니 다.
이 어 PieChartDataSet.h 클래스 로 dataSet 대상 을 만 들 고 만 들 때 yVals 를 넣 어야 합 니 다.
그리고 PieChartData.h 클래스 로 data 대상 을 만 들 고 만 들 때 xVals 와 dataSet 대상 을 넣 어야 합 니 다.
마지막 으로 data 대상 을 떡 모양 그림 의 data 속성 에 직접 할당 하면 됩 니 다.data 대상 코드 를 만 드 는 것 은 다음 과 같 습 니 다.

- (PieChartData *)setData{
 double mult = 100;
 int count = 5;//          
 //       
 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];
 }
 //          
 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;//        
 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;//    
 dataSet.sliceSpace = 0;//         
 dataSet.selectionShift = 8;//     ,      
 dataSet.xValuePosition = PieChartValuePositionInsideSlice;//    
 dataSet.yValuePosition = PieChartValuePositionOutsideSlice;//    
 //                 
 dataSet.valueLinePart1OffsetPercentage = 0.85;//                   ,     ,         
 dataSet.valueLinePart1Length = 0.5;//          
 dataSet.valueLinePart2Length = 0.4;//            
 dataSet.valueLineWidth = 1;//     
 dataSet.valueLineColor = [UIColor brownColor];//    
 //data
 PieChartData *data = [[PieChartData alloc] initWithXVals:xVals dataSet:dataSet];
 NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
 formatter.numberStyle = NSNumberFormatterPercentStyle;
 formatter.maximumFractionDigits = 0;//    
 formatter.multiplier = @1.f;
 [data setValueFormatter:formatter];//        
 [data setValueTextColor:[UIColor brownColor]];
 [data setValueFont:[UIFont systemFontOfSize:10]];
 return data;
}

실행 결 과 는 다음 과 같 습 니 다.

실행 결과
빈 모양 의 떡 모양 그림 이 필요 하지 않 으 면 떡 모양 그림 의 drawHole Enabled 를 NO 로 할당 하고 중간 텍스트 를 제거 하면 됩 니 다.코드 는 다음 과 같 습 니 다.self.pieChartView.drawHoleEnabled = NO;효 과 는 다음 과 같 습 니 다:

옹 골 진 떡 상세도
각 블록 간 에 간격 이 필요 하 다 면 dataset 대상 의 sliceSpace 속성 설정 을 통 해 코드 는 다음 과 같 습 니 다.dataSet.sliceSpace = 3;효 과 는 다음 과 같 습 니 다:

블록 간격 이 있 는 떡 모양 그림.
속성 이 많 기 때문에 다른 효 과 는 스스로 시도 할 수 있 습 니 다.
데모 다운로드 주소:http://xiazai.jb51.net/201612/yuanma/PieChartDemo-master_jb51.rar
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!