關於charts的系列視圖介紹傳送門:
iOS 圖表工具charts介紹
iOS 圖表工具charts之LineChartView
iOS 圖表工具charts之BarChartView
iOS 圖表工具charts之PieChartView
iOS 圖表工具charts之CandleStickChartView
iOS 圖表工具charts之CombinedChartView
PieChartView在charts中可以用來繪制餅狀圖,由於charts是基於swift開發的,如果需要和objective-C混編(通過pod的方式不用管),可以參考我的上幾篇文章iOS OC中橋接swift第三方庫》,這里主要講的是PieChartView的一些常用屬性和一些基本用法,實際情況以開發為准
PieChartView的一下屬性介紹
PieChartView *chartView = [[PieChartView alloc] init];
//設置偏移
[chartView setExtraOffsetsWithLeft:20 top:20 right:20 bottom:20];
//無內容顯示
chartView.noDataText = @"";
//關閉描述
chartView.chartDescription.enabled = YES;
chartView.chartDescription.text = @"tiny`s barChart demo";
//關閉圖例
chartView.legend.enabled = YES;
//將數據轉換為百分比
chartView.usePercentValuesEnabled = YES;
//慣性
chartView.dragDecelerationFrictionCoef = 0.5; //0 1 慣性
//設置中間文字
chartView.drawCenterTextEnabled = YES;
chartView.centerText = @"我是中間文字";
//顯示扇形區域文字
chartView.drawEntryLabelsEnabled = YES;
//可以旋轉
chartView.rotationEnabled = YES;
//扇區可點擊
chartView.highlightPerTapEnabled = YES;
//代理
chartView.delegate = self;
PieChartDataEntry 每個扇形區域
NSArray *datas = @[@"24",@"74",@"35"];
NSArray *titles = @[@"Pie1",@"Pie2",@"Pie3"];
NSMutableArray *array = [NSMutableArray array];
for (int i = 0; i < datas.count; i++) {
PieChartDataEntry *entry = [[PieChartDataEntry alloc] initWithValue:[datas[i] integerValue] label:titles[i]];
[array addObject:entry];
}
PieChartDataSet 多個PieChartDataEntry扇形區域組合在一起就成了一個餅狀圖
PieChartDataSet *set = [[PieChartDataSet alloc] initWithEntries:array label:@"Pie DataSet"];
//顏色(每個扇形區域可以單獨設置顏色)
set.colors = @[UIColor.redColor,UIColor.blueColor,UIColor.cyanColor];
set.entryLabelFont = [UIFont systemFontOfSize:20];
set.entryLabelColor = [UIColor blackColor];
set.drawIconsEnabled = NO;
// 當餅狀圖帶折線時,dataSet.yValuePosition 數值的位置只有設置為
// PieChartValuePositionOutsideSlice,折線才會顯示,valueLine相關屬性才有用
set.drawValuesEnabled = YES;
set.valueFont = [UIFont systemFontOfSize:20];
set.valueColors = @[UIColor.redColor,UIColor.blueColor,UIColor.cyanColor];
set.yValuePosition = PieChartValuePositionOutsideSlice;
set.valueLineColor = UIColor.greenColor;
//格式化
NSNumberFormatter *pFormatter = [[NSNumberFormatter alloc] init];
pFormatter.numberStyle = NSNumberFormatterPercentStyle;
pFormatter.maximumFractionDigits = 1;
pFormatter.multiplier = @1.f;
pFormatter.percentSymbol = @" %";
set.valueFormatter = [[ChartDefaultValueFormatter alloc] initWithFormatter:pFormatter];
//相鄰區塊之間的間距
set.sliceSpace = 5;
//扇形區域放大范圍
set.selectionShift = 8;
//動畫開始的角度
PieChartData *data = [[PieChartData alloc] initWithDataSet:set];
self.chartView.data = data;
//動畫開啟
[self.chartView animateWithXAxisDuration:2.0f easingOption:ChartEasingOptionEaseOutExpo];
一些需要注意的點:
1.點擊扇形區域可以縮放
1.設置PieChartView可點擊chartView.highlightPerTapEnabled = YES;
2.設置PieChartDataSet縮放系數set.selectionShift = 8;
2.扇形區域剛出來的時候動畫旋轉一定的角度
[self.chartView animateWithXAxisDuration:2.0f easingOption:ChartEasingOptionEaseOutExpo];
3.扇形區域折線要顯示出來
1.當餅狀圖帶折線時,dataSet.yValuePosition 數值的位置只有設置為 PieChartValuePositionOutsideSlice,折線才會顯示,valueLine相關屬性才有用
2. set.drawValuesEnabled = YES;
set.valueFont = [UIFont systemFontOfSize:20];
set.valueColors = @[UIColor.redColor,UIColor.blueColor,UIColor.cyanColor];
set.yValuePosition = PieChartValuePositionOutsideSlice;
set.valueLineColor = UIColor.greenColor;
4.扇形區域數值百分比格式化
NSNumberFormatter *pFormatter = [[NSNumberFormatter alloc] init];
pFormatter.numberStyle = NSNumberFormatterPercentStyle;
pFormatter.maximumFractionDigits = 1;
pFormatter.multiplier = @1.f;
pFormatter.percentSymbol = @" %";
set.valueFormatter = [[ChartDefaultValueFormatter alloc] initWithFormatter:pFormatter];
5.顯示扇形區域的描述文字
1.設置文字可顯示 chartView.drawEntryLabelsEnabled = NO;
2.每個扇形區域設置文字titles為對應的文字描述
NSArray *datas = @[@"24",@"74",@"35"];
NSArray *titles = @[@"Pie1",@"Pie2",@"Pie3"];
NSMutableArray *array = [NSMutableArray array];
for (int i = 0; i < datas.count; i++) {
PieChartDataEntry *entry = [[PieChartDataEntry alloc] initWithValue:[datas[i] integerValue] label:titles[i]];
[array addObject:entry];
}