iOS PieChartView的使用 Charts版本3.2.1

上篇文章写了如何导入Charts
这篇讲讲PieChartView的使用
PieChartView 可以实现 不带折线的饼状图、带折线的饼状图

效果图如下

不带折线的饼状图

带折线的饼状图

非折线饼状图和折线并状态相互切换

本文使用的masonry布局，初始化饼状图时，由内而外的设置相关属性，分为如下几个部分：
1、中间的文本
2、同心圆
3、扇形区块
4、图例（左下角的那一坨）
5、饼状图的名字（未显示）

一、创建PieChartView对象

 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);
    }];

二、设置饼状图样式

1、基本样式

 /* 基本样式 */
    chartView.delegate = self;//设置代理
    [chartView setExtraOffsetsWithLeft:5.f top:5.f right:5.f bottom:5.f];//饼状图距离边缘的间隙
    chartView.usePercentValuesEnabled = YES; //是否根据所提供的数据, 将显示数据转换为百分比格式
    chartView.dragDecelerationEnabled = YES;//拖拽饼状图后是否有惯性效果
    

2、饼状图中间的文本

chartView.centerText = @"我是中心这句代码设置中间文本的文字，默认为黑色,设置中间文本的字体、颜色属性没有找到（找到了的同胞可以留言），要设置字体、颜色可以通过centerAttributedText这个富文本属性代替

/* 设置饼状图中间的文本 */
    chartView.drawCenterTextEnabled = YES;//是否绘制中间的文本
//    chartView.centerText = @"我是中心";//中间文本的文字，默认为灰色,设置中间文本的字体、颜色属性没有找到，可以用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，不展示同心圆，此时两个同心圆都消失，如果只想要一个同心圆，就将holeRadiusPercent,transparentCircleRadiusPercent两个值设置为一样

 /* 设置饼状图中间的同心圆 */
    chartView.drawHoleEnabled = YES; //饼状图是否是空心圆,设置为NO之后，半透明空心圆也消失咯
    chartView.holeRadiusPercent = 0.35;//第一个空心圆半径占比
    chartView.holeColor = [UIColor whiteColor];//第一个空心圆颜色
    chartView.transparentCircleRadiusPercent = 0.38;//第二个空心圆半径占比，半径占比和第一个空心圆半径占比设置为一样的时候，只有一个圆咯
    chartView.transparentCircleColor = UIColorFromHex(0xf1f1f1);//第二个空心圆颜色

4、饼状图扇形区块文本

drawEntryLabelsEnabled这个属性是用来显示上图情况1、情况2、情况3、情况4的，如果drawEntryLabelsEnabled = NO 就不能显示文字咯

/* 设置饼状图扇形区块文本*/
    chartView.drawEntryLabelsEnabled = YES; //是否显示扇形区块文本描述

5、没有数据的显示

/*饼状图没有数据的显示*/
    chartView.noDataText = @"暂无数据";//没有数据是显示的文字说明
    chartView.noDataTextColor = UIColorFromHex(0x21B7EF);//没有数据时的文字颜色
    chartView.noDataFont = [UIFont fontWithName:@"PingFangSC" size:15];//没有数据时的文字字体

6、设置饼状图图例样式

如果不需要展示图例，直接设置chartView.legend.enabled = NO
其他属性都可以不用设置咯，反正设置了也显示不出来

 /* 设置饼状图图例样式 */
    chartView.legend.enabled = YES;//显示饼状图图例解释说明
    chartView.legend.maxSizePercent = 0.1;///图例在饼状图中的大小占比, 这会影响图例的宽高
    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 = @"我是饼状图名";//设置饼状图名字
    chartView.chartDescription.textColor = [UIColor redColor];//设置饼状图名字颜色
    chartView.chartDescription.textAlign = NSTextAlignmentLeft;//设置饼状图名字对齐方式
    chartView.chartDescription.xOffset = 100;//饼状图名字x轴偏移

8、饼状图交互

chartView.rotationEnabled = YES 饼状图可以旋转，设置为NO不可以旋转

chartView.highlightPerTapEnabled = YES,每个扇形区块可以点击，设置dataSet.selectionShift = 8（这个属性具体如何设置会在下面看见，稍安勿躁~），点击后扇形区块变大，点击后还会走(void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight这个代理方法（也会在下面解释哦~）

 /*饼状图交互*/
chartView.rotationEnabled = YES;//是否可以选择旋转
chartView.highlightPerTapEnabled = YES;//每个扇形区块是否可点击

三、为饼状图提供数据

/*  为饼状图提供数据 */
   _numbers = @[@"10",@"20",@"30",@"40"];
    _names = @[@"情况1",@"情况2",@"情况3",@"情况4"];
    [self setPieData];

setPieData方法
将提供数据写成一个方法的原因是:切换成折线图的也要提供数，所以就封装成一个方法了
PieChartDataEntry 每块扇形的对象，有很多种初始化方法，代码里面写了两种，这个初始化方法里面的四个属性解释如下

1、value : 扇形的数值, 如10
2、label : 扇形的文字描述，如情况1
3、icon : 扇形的图片
4、data : 扇形的tag

PieChartDataSet相当于数据源的感觉，初始化方法里的两个属性解释如下

1、values ：装有PieChartDataEntry对象的数组
2、label ：图例的名字

然后设置每块扇形的颜色，每块扇形的间距，选中后的半径变化dataSet.selectionShift = 8，扇形被选中后，增加8个像素的半径，扇形区块的图片，文字描述，数值等相关属性设置

self.isValueLine = NO 不带折线图的饼状图
self.isValueLine = YES 带折线图的饼状图

当饼状图带折线时，dataSet.yValuePosition 数值的位置只有设置为
PieChartValuePositionOutsideSlice，折线才会显示，valueLine相关属性才有用

valueFormatter数值显示的格式,此处设置为百分比格式

rotationAngle 动画开始的角度，此时设置为从0度开始，上面的gif可以看出来

饼状图动画效果为ChartEasingOptionEaseOutExpo

- (void)setPieData{
   
    NSMutableArray *values = [[NSMutableArray alloc] init];
    for (int i = 0; i < _numbers.count; i++){
        /*
         value : 每块扇形的数值
         label : 每块扇形的文字描述
         icon  : 图片
         */
        [values addObject:[[PieChartDataEntry alloc]initWithValue:[_numbers[i] doubleValue] label:_names[i] icon:nil]];
        
        /*
         value : 每块扇形的数值
         label : 每块扇形的文字描述
         data  : tag值
         */
//        [values addObject:[[PieChartDataEntry alloc] initWithValue:[_numbers[i] doubleValue] label:_names[i] data:[NSString stringWithFormat:@"%d",i]]];
    }
   
    /*
     图例
     values : values数组
     label : 图例的名字
     */
    PieChartDataSet *dataSet = [[PieChartDataSet alloc] initWithValues:values label:@"图例说明"];//图例说明
    /* 设置每块扇形区块的颜色 */
    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; //相邻区块之间的间距
    dataSet.selectionShift = 8;//选中区块时, 放大的半径
    
    dataSet.drawIconsEnabled = NO; //扇形区块是否显示图片
    
    dataSet.entryLabelColor = [UIColor redColor];//每块扇形文字描述的颜色
    dataSet.entryLabelFont = [UIFont systemFontOfSize:15];//每块扇形的文字字体大小
    
    dataSet.drawValuesEnabled = YES;//是否显示每块扇形的数值
    dataSet.valueFont = [UIFont systemFontOfSize:11];//每块扇形数值的字体大小
    dataSet.valueColors = @[[UIColor redColor],[UIColor cyanColor],[UIColor greenColor],[UIColor grayColor]];//每块扇形数值的颜色,如果数值颜色要一样，就设置一个色就好了

    if (self.isValueLine) {
        /* 数值与区块之间的用于指示的折线样式*/
        dataSet.xValuePosition = PieChartValuePositionInsideSlice;//文字的位置
        dataSet.yValuePosition = PieChartValuePositionOutsideSlice;//数值的位置，只有在外面的时候，折线才有用
        dataSet.valueLinePart1OffsetPercentage = 0.8; //折线中第一段起始位置相对于区块的偏移量, 数值越大, 折线距离区块越远
        dataSet.valueLinePart1Length = 0.4;//折线中第一段长度占比
        dataSet.valueLinePart2Length = 0.6;//折线中第二段长度占比
        dataSet.valueLineWidth = 1;//折线的粗细
        dataSet.valueLineColor = [UIColor brownColor];//折线颜色
    }
    //设置每块扇形数值的格式
    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;
    
    /* 设置饼状图动画 */
    self.chartView.rotationAngle = 0.0;//动画开始时的角度在0度
    [self.chartView animateWithXAxisDuration:2.0f easingOption:ChartEasingOptionEaseOutExpo];//设置动画效果
    
}

button的点击事件

- (void)respondsToButton:(UIButton *)sender{
    sender.selected = !sender.selected;
    [sender setTitle:sender.selected == YES ? @"设置为不带折线的饼状图" :@"设置为带折线的饼状图" forState:UIControlStateNormal];
    self.isValueLine = sender.selected;
    [self setPieData];
}

到此效果图就实现咯~~~

四、ChartViewDelegate代理

ChartViewDelegate里面有4个方法，当我们选择某个扇形块后，会调用(void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight这个方法（前提chartView.highlightPerTapEnabled = YES）

我们怎么确定到底选择了哪一块呢？

  /*
         value : 每块扇形的数值
         label : 每块扇形的文字描述
         icon  : 图片
         */
        [values addObject:[[PieChartDataEntry alloc]initWithValue:[_numbers[i] doubleValue] label:_names[i] icon:nil]];

初始化PieChartDataEntry，我们传入了每块扇形的数值、文字描述、扇形上的图片

当我们点击情况1，输出 entry.x = 0，entry.y = 10
当我们点击情况2，输出 entry.x = 0，entry.y = 20
当我们点击情况3，输出 entry.x = 0，entry.y = 30
当我们点击情况4，输出 entry.x = 0，entry.y = 40

可见，entry.y就是我们传入的数值，但是凭借这个值进行判断并不可靠，万一我们传入的值是一样的呢？

所以此时初始化values换一种方式,用tag值来唯一标识

 /*
         value : 每块扇形的数值
         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");
    //当前选中饼状图的值
    NSLog(@"---chartValueSelected---value: x = %g,y = %g",entry.x,  entry.y);
    //当前选中饼状图的index
    NSLog(@"---chartValueSelected---value:第 %@ 个数据", entry.data);
}

打印输出值如下，这样子就能确定点击的哪一块扇形了~

输出值

最后附上demo地址

参考博客
iOS开发 - Charts（PieChartView）使用经验
iOS使用Charts框架绘制—饼状图

文章链接
3、BarChartView实现横向条形统计图和纵向条形统计图

喜欢就点个赞吧✌️✌️
有错之处，还请指出，感谢