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实现横向条形统计图和纵向条形统计图

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 221,888评论 6赞 515
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 94,677评论 3赞 399
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 168,386评论 0赞 360
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,726评论 1赞 297
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,729评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 52,337评论 1赞 310
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,902评论 3赞 421
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,807评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,349评论 1赞 318
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,439评论 3赞 340
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,567评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 36,242评论 5赞 350
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,933评论 3赞 334
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,420评论 0赞 24
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,531评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,995评论 3赞 377
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,585评论 2赞 359

推荐阅读更多精彩内容

  • weka-Explorer-Classify的使用
    一、实验目的 学习使用 weka 中的常用分类器，完成数据分类任务。 二、实验内容 了解 weka 中 explo...
    yigoh阅读 8,566评论 5赞 4
  • 二、Charts
    8. Setting Colors Since release v1.4.0, the ColorTemplate...
    ngugg阅读 711评论 0赞 0
  • 2018-03-08
    图表控件库 MPAndroidChart 的使用 使用方法 项目源码地址，包含了很多类型的图标 https://g...
    jinchuang阅读 824评论 0赞 0
  • 得“阿娇”者得天下
    “你想娶媳妇吗？” “想啊” “大殿上的这些女官怎么样？” “不好” “那阿娇姐姐呢？” “如果能娶阿娇姐姐做老婆...
    史料不急阅读 2,923评论 4赞 11
  • 点评 林剑 绕道而行是一种智慧
    我们总觉得选择很多，其实未必，我们最后选择走的路可能原本就是唯一能走通的路。 绕道而行，不是舍近求远，也是一种必然...
    飒mm阅读 374评论 0赞 1