iOS PieChartView的使用 Charts版本3.2.1

上篇文章寫了如何導(dǎo)入Charts
這篇講講PieChartView的使用
PieChartView 可以實(shí)現(xiàn) 不帶折線的餅狀圖、帶折線的餅狀圖

效果圖如下

不帶折線的餅狀圖
帶折線的餅狀圖
非折線餅狀圖和折線并狀態(tài)相互切換

本文使用的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;//折線中第一段長度占比
        dataSet.valueLinePart2Length = 0.6;//折線中第二段長度占比
        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)指出，感謝????

最后編輯于 ：
?著作權(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)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • 一、實(shí)驗(yàn)?zāi)康?學(xué)習(xí)使用 weka 中的常用分類器，完成數(shù)據(jù)分類任務(wù)。 二、實(shí)驗(yàn)內(nèi)容 了解 weka 中 explo...
    yigoh閱讀 8,859評(píng)論 5贊 4
  • 8. Setting Colors Since release v1.4.0, the ColorTemplate...
    ngugg閱讀 836評(píng)論 0贊 0
  • 圖表控件庫 MPAndroidChart 的使用 使用方法 項(xiàng)目源碼地址，包含了很多類型的圖標(biāo) https://g...
    jinchuang閱讀 889評(píng)論 0贊 0
  • “你想娶媳婦嗎？” “想啊” “大殿上的這些女官怎么樣？” “不好” “那阿嬌姐姐呢？” “如果能娶阿嬌姐姐做老婆...
    史料不急閱讀 3,104評(píng)論 4贊 11
  • 我們總覺得選擇很多，其實(shí)未必，我們最后選擇走的路可能原本就是唯一能走通的路。 繞道而行，不是舍近求遠(yuǎn)，也是一種必然...
    颯mm閱讀 490評(píng)論 0贊 1

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