IOS开发---绘制饼图

最新推荐文章于 2024-04-28 23:35:45 发布
最新推荐文章于 2024-04-28 23:35:45 发布
阅读量1.2k 收藏
点赞数
分类专栏： IOSObjective-C 文章标签： ios float 360 alignment interface 存储
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caryliu/article/details/8099100
版权

IOS绘制图形同其它绘制图形的方法相同，首先都需要创建图形上下文，之后push当前要绘制的上下文，设置颜色、阴影等等。。。

代码参考Muh Hon Cheng的PlotCreator的程序。

首先定义类ChartObject用来存储饼图上每个pie的信息

float value；存储当前pie的值

float startAngle；pie的开始的角度

float endAngle；pie的结束角度

NSString *title;  存储当前pie的标题

UIColor *color; 存储当前pie的颜色


ChartObject类具体代码如下：

@interface ChartObject : NSObject

{

    float value;

    float startAngle;

    float endAngle;

    NSString *title;

    UIColor *color;

}


@property (nonatomic, assign)float value, startAngle, endAngle;

@property (nonatomic, strong)NSString *title;

@property (nonatomic, strong)UIColor *color;


- (id)initWithTitle:(NSString*)_title value:(float)_value;

+ (id)pieComponentWithTitle:(NSString*)_title value:(float)_value;

@end


@implementation ChartObject

@synthesize value,startAngle,endAngle,title,color;


- (id)initWithTitle:(NSString *)_title value:(float)_value

{

    self = [super init];

    if (self) {

        self.title = _title;

        self.value = _value;

        self.color = PCColorDefault;

    }

    return self;

}


+ (id)pieComponentWithTitle:(NSString*)_title value:(float)_value

{

    return [[super alloc]initWithTitle:_title value:_value];

}


- (void)dealloc

{

    [title release];

    [color release];

    [super dealloc];

}


@end


下面定义用于显示的视图类ChartView

ChartView是具体的绘图类

绘图的例子如：

   CGContextRef ctx = UIGraphicsGetCurrentContext();

         UIGraphicsPushContext(ctx);         

         CGContextSetRGBFillColor(ctx, 1.0f, 1.0f, 1.0f, 1.0f);  

         CGContextSetShadow(ctx, CGSizeMake(0.0f, 0.0f), TOP_MARGIN);

         CGContextFillEllipseInRect(ctx, CGRectMake(x, y, diameter, diameter));

         UIGraphicsPopContext();   

在ChartView类用变量数组存储饼图的信息，数组中的每一项为ChartObject类

ChartObject类中的title和value可以在初始化时定义，开始的角度和结束的角度在ChartView中赋值。 

具体计算方法看代码的注释。

代码如下：

@interface ChartView : UIView           //显示信息的页面

#define TOP_MARGIN 15             //阴影的宽度

#define LABEL_TOP_MARGIN 15

{

    NSMutableArray *chartObjectsArray;

    int diameter;                           //直径

}

@property (strong, nonatomic)NSMutableArray *chartObjectsArray;

@property (assign, nonatomic)int diameter;

@end


@implementation ChartView

@synthesize chartObjectsArray;

@synthesize diameter;

- (id)init

{

    self = [super init];

    if (self) {

        chartObjectsArray = [[NSMutableArray alloc]initWithCapacity:0];

        [self setBackgroundColor:[UIColor clearColor]];

    }

    return self;

}


- (void)drawRect:(CGRect)rect       //UIView 的 drawRect 方法

{

    if (self.diameter == 0) {

        diameter = MIN(rect.size.width, rect.size.height) - 2*TOP_MARGIN;

    }

    NSLog(@"diameter = %d",diameter);

    float gap = 1;          //边缘线宽度

    

    float x = (rect.size.width - diameter)/2;       

    float y = (rect.size.height - diameter)/2;  //圆所在矩形的起始点

    NSLog(@"x = %f,y = %f",x,y);

    float inner_radius = diameter/2;        //半径

    float origin_x = x + diameter/2;

    float origin_y = y + diameter/2;        //rect的中心点origin_x和origin_y。

    NSLog(@"origin_x = %f,origin_y = %f",origin_x,origin_y);

    // label stuff

    //float left_label_y = LABEL_TOP_MARGIN;

    //float right_label_y = LABEL_TOP_MARGIN;//左右标题方块的阴影

     if ([chartObjectsArray count]>0)

     {

         float total = 0;

         for (ChartObject *component in chartObjectsArray)

         {

             total += component.value;

         }//total为计算后总的值

         

         /*-----------------------------------画阴影画圆-----------------------------------*/

         CGContextRef ctx = UIGraphicsGetCurrentContext();

         UIGraphicsPushContext(ctx);         //获取图像上下文

         CGContextSetRGBFillColor(ctx, 1.0f, 1.0f, 1.0f, 1.0f);  // white color

         CGContextSetShadow(ctx, CGSizeMake(0.0f, 0.0f), TOP_MARGIN);//TOP_MARGIN阴影的宽度

         CGContextFillEllipseInRect(ctx, CGRectMake(x, y, diameter, diameter));//画白圆

         UIGraphicsPopContext();             //pop图像上下文

         /*-----------------------------------画阴影画圆-----------------------------------*/

         

         float nextStartDeg = 0;        //当前项目开始的角度

         float endDeg = 0;              //当前项目结束的角度

         for (int i=0; i<[chartObjectsArray count]; i++)   

         {

             /*-----------------------------------画饼图-----------------------------------*/

             ChartObject *component  = [chartObjectsArray objectAtIndex:i];

             float perc = [component value]/total;   //当前项目占总项目的百分比

             endDeg = nextStartDeg+perc*360;     //计算结束的角度值

             CGContextSetFillColorWithColor(ctx, [component.color CGColor]);//设置填充的颜色

             CGContextMoveToPoint(ctx, origin_x, origin_y);  //将上下文移动到起始点

             CGContextAddArc(ctx, origin_x, origin_y, inner_radius, (nextStartDeg-90)*M_PI/180.0, (endDeg-90)*M_PI/180.0, 0);    //画扇型       1顺时针，0逆时针

             CGContextClosePath(ctx); //关闭上下文

             CGContextFillPath(ctx);  //填充视图

             CGContextSetRGBStrokeColor(ctx, 1, 1, 1, 1);

             [component setStartAngle:nextStartDeg];

             [component setEndAngle:endDeg];

             /*-----------------------------------画饼图-----------------------------------*/

             

             /*-----------------------------------画边缘线----------------------------------*/

             CGContextSetRGBStrokeColor(ctx, 1, 1, 1, 1);   //设置上下文为黑色

             CGContextSetLineWidth(ctx, gap);               //设置要画的线的宽度

             CGContextMoveToPoint(ctx, origin_x, origin_y); //将环境上下文移动到圆心

             CGContextAddArc(ctx, origin_x, origin_y, inner_radius, (nextStartDeg-90)*M_PI/180.0, (endDeg-90)*M_PI/180.0, 0);                        //沿边缘画线

             CGContextClosePath(ctx);

             CGContextStrokePath(ctx);

             /*-----------------------------------画边缘线----------------------------------*/


             /*------------------------------------标签-----------------------------------*/

             

             /*

             NSInteger O_x,O_y,E_x,E_y = 0;        //原点为origin_x,origin_y;半径长度为inner_radius;

             UIFont *font =[UIFont fontWithName:@"GeezaPro" size:10];

             if (nextStartDeg >= 180 || (nextStartDeg < 180 && endDeg > 270))   //当扇形为左面时

             {

                 NSString *percentageText = [NSString stringWithFormat:@"%@\n%.1f%%",component.title,component.value/total*100];//当前项目占总项目的百分比

                 NSLog(@"stratplace = %f,endplace = %f",nextStartDeg,endDeg);

                 NSLog(@"percent = %@",percentageText);

                

                 if (endDeg > 270 && nextStartDeg < 180)    //二三四象限

                 {

                     double o = 90+endDeg-360;

                     O_x = origin_x - 2*cos(2*M_PI*o/360)*inner_radius;

                     O_y = origin_y - sin(2*M_PI*o/360)*inner_radius;

                     E_x = origin_x - cos(2*M_PI*o/360)*inner_radius;

                     E_y = origin_y + sin(2*M_PI*o/360)*inner_radius;

                     

                 }

                 else  //nextStartDeg >=180

                 {

                     if (endDeg <= 270) //第三象限

                     {

                         double o = 270 - endDeg;

                         double p = nextStartDeg - 180;

                         double des = abs((origin_x - cos(2*M_PI*o/360)*inner_radius) - (origin_x - sin(2*M_PI*p/360)*inner_radius));

                         O_x = origin_x - cos(2*M_PI*o/360)*inner_radius - des - 30; //(30)

                         O_y = origin_y + sin(2*M_PI*o/360)*inner_radius;

                         E_x = origin_x - sin(2*M_PI*p/360)*inner_radius;

                         E_y = origin_y + cos(2*M_PI*p/360)*inner_radius;   // (30)

                     }

                     else       

                     {

                         if (nextStartDeg >= 270)//第四象限

                         {

                             double o = 360 - endDeg;

                             double p = nextStartDeg - 270;

                             double des = abs((origin_x - cos(2*M_PI*p/360)*inner_radius) - (origin_x - sin(2*M_PI*o/360)*inner_radius));

                             O_x = origin_x - cos(2*M_PI*p/360)*inner_radius - des;

                             O_y = origin_y - cos(2*M_PI*o/360)*inner_radius - 30;//(30)

                             E_x = origin_x - sin(2*M_PI*o/360)*inner_radius;

                             E_y = origin_y - sin(2*M_PI*p/360)*inner_radius - 30;//(30)

                         }

                         else   //三四象限

                         {

                             double o = nextStartDeg - 180;

                             double p = endDeg - 270;

                             if (sin(2*M_PI*o/360)*inner_radius == cos(2*M_PI*p/360)*inner_radius)//x相等时

                             {

                                 O_x = origin_x - sin(2*M_PI*o/360)*inner_radius - 40 - 30; //(30)

                                 E_x = origin_x - sin(2*M_PI*o/360)*inner_radius - 30;  //(30)

                             }

                             else

                             {

                                 double des = abs((origin_x - sin(2*M_PI*o/360)*inner_radius) - (origin_x - cos(2*M_PI*p/360)*inner_radius));

                                 NSLog(@"des = %f",des);

                                 O_x = MIN((origin_x - sin(2*M_PI*o/360)*inner_radius),(origin_x - cos(2*M_PI*p/360)*inner_radius)) -des - 30;  //(30)

                                 E_x = MAX((origin_x - sin(2*M_PI*o/360)*inner_radius),(origin_x - cos(2*M_PI*p/360)*inner_radius)) - 30; //(30)

                             }

                             O_y = origin_y - sin(2*M_PI*p/360)*inner_radius;

                             E_y = origin_y + cos(2*M_PI*o/360)*inner_radius;

                         }

                     }

                 }

                    CGContextSetFillColorWithColor(ctx, [component.color CGColor]);

                 CGContextSetShadow(ctx, CGSizeMake(0.0f, 0.0f), 2);

                 CGRect percFrame = CGRectMake(O_x,O_y,E_x,E_y);//设置方块

                 NSLog(@"ox = %f,oy = %f,ex = %f,ey = %f",percFrame.origin.x,percFrame.origin.y,percFrame.size.width,percFrame.size.height);

                 [percentageText drawInRect:percFrame withFont:font lineBreakMode:UILineBreakModeWordWrap alignment:UITextAlignmentRight];

             }

             else           //当扇形为右面时

             {

                 NSString *percentageText = [NSString stringWithFormat:@"%.1f%%",component.value/total*100];//当前项目占总项目的百分比

                 NSLog(@"stratplace = %f,endplace = %f",nextStartDeg,endDeg);

                 NSLog(@"percent = %@",percentageText);

                   //( >= 180 || 0~180 )

                 if ((endDeg - nextStartDeg) >= 180)    //角度大于等于180时

                 {

                     

                 }

                 else   //角度小于180度

                 {

                     

                 }

                

             }

             */

             /*------------------------------------标签-----------------------------------*/

             nextStartDeg = endDeg;

         }

     }

    customTableView *itemTableView = [[customTableView alloc]initWithFrame:CGRectMake(origin_x +diameter, origin_y-inner_radius, 200, 500) style:UITableViewStylePlain];

    float total=0;

    for (ChartObject *component in chartObjectsArray)

    {

        total += component.value;

    }//total为计算后总的值

    [itemTableView setTableitemsArray:chartObjectsArray];

    [itemTableView setTot

    [self addSubview:itemTableView];

}


- (void)dealloc

{

    [chartObjectsArray removeAllObjects];

    [chartObjectsArray release];

    [super dealloc];

}

@end

在绘制标签时想过用三角函数计算该显示的矩形位置，但是可能计算失误，本人比较懒，懒得细究就用个tableview显示了，有兴趣的朋友，和有更好方法的朋友请指教小弟一二，小弟在此感激不禁。

文章中如有错误之处，请大家多多批评。


UmbrellaLiu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
iOS绘制饼图 XYPieChart.zip
09-17
iOS绘制饼图 XYPieChart ,XYPieChart 是 iOS 上用来绘制简单饼图的控件。
[iOS]饼状图
Gamin
10-29 782
Github:https://github.com/Gamin-fzym/GADVPieChart 之前项目中需要用到饼状图来统计数据，我在Github上找到DVPieChart，因为它在样式上与我们UI的设计图差异不大。拿来改改样式，按需要传入数据就解决了问题。后来，需要统计的数据条数变得更多了，这时发现DVPieChart的view上展示不了太多标签，很多指示线还会交叉。后面在Github没重新找到更合适的饼状图，就只有自己提笔按照需求重写了一个状图。 绘制逻辑会也不复杂。 1、先画好饼状图（需要环
IOS开发基础之绘制饼图、柱状图、自定义进度条
A1521315qwss的博客
02-23 552
IOS开发基础之绘制饼图、柱状图、自定义进度条 1.绘制饼图 效果 源码 // LJView.m // 34-绘图饼图 // Created by 鲁军 on 2021/2/23. #import "LJView.h" @implementation LJView - (void)drawRect:(CGRect)rect { NSArray *array = @[@0.3,@0.1,@0.2,@0.4]; CGFloat end=0,start = 0; for(int
一个 iOS 饼图控件
kmyhy的专栏
01-03 2668
github地址：https://github.com/kmyhy/OvalMeter 一个 iOS 饼图控件，可以饼图方式显示 0-1 之间的数值。同时支持自定义以及以动画方式显示(点击查看动画效果)：用法将如下文件导入到您的项目中： PercentOval.h/.m OvalMeter.h/.m/.xib 根据需要在你的源文件中导入对应的头文件。PercentOvalPercentOval 用
iOS 中饼状图的自定义绘制
will_han 的专栏
09-02 3507
前几天有一个需求是制作一个统计工资的饼状图，但是和一般的饼状图不同的是要求改饼状图中心需要有两条文字，功能需求就是这样，先上一张效果图： 因为咱们的饼状图本身只是一个View ，在调用的时候一定是在一个ViewController 里面的，所以我们需要传值，这里我选择用代理：@protocol PDChartViewDataSource; @interface PDChartView :
iOS绘制饼状图
心的专栏
07-10 742
效果图 1 创建SKPPieChartView继承于UIView 2 SKPPieChartView.h #import <UIKit/UIKit.h> NS_ASSUME_NONNULL_BEGIN @interface ChartModel : NSObject @property(nonatomic,assign)float bili;//总值为1 @property(...
iOS绘制3D饼图的实现方法
08-31
饼图常用于统计学模块。常见的一般为2D饼图，这篇文章主要介绍了iOS绘制3D饼图的实现方法,3D饼图更加立体，用户的好感度也比较高，下面需要的朋友可以参考借鉴，一起来看看吧。
ios 程序绘制饼图的demo
06-21
ios 程序绘制饼图的demo。例子介绍: http://blog.csdn.net/donny_zhang
swift-EasyCharts一个简单可方便快捷画出折线图饼图进度条柱状图雷达图的iOS库Objective-C版本
08-15
EasyCharts 一个简单可方便快捷画出折线图、饼图、进度条、柱状图、雷达图的iOS库（Objective-C版本）
iOS之画饼图
程序小白的博客
06-01 1884
iOS之画饼图1.效果图如下2.画饼图实现步骤如下： 1.在main.storyboard中拖入一个UIView控件，并设置其Custom Class 为HMPieView。如下图 2.新建HMPieView类 // // HMPieView.h // 03-饼图 //#import <UIKit/UIKit.h>@interface HMPieView : UIView@end// // H
IOS开发-画饼图画柱状图
嘿嘿嘿
05-20 1346
饼图(1)自定义一个view (2)导入QuartzCore框架 (3)m文件代码如下：#import "ZCView.h" #import <QuartzCore/QuartzCore.h>//随机浮点数 #define ARC4RANDOM_MAX 0x100000000 // 颜色 #define ZCColor(r, g, b) [UIColor colorWithRed:(r)/255
ios饼图
dujianjunqwer的博客
12-28 194
AppDelegate默认ViewController.h默认ViewController.m#import "ViewController.h" #import "KMView.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad { [super viewDidLoad];
iOS开发之导入Charts与饼图
Simona_1973的博客
09-13 2256
html有http://echarts.baidu.com/examples.html源码来参考 我们iOS也有https://github.com/danielgindi/Charts 这个呀 源码是swift,对于现在把OC作为主程的我还是需要桥接文件这些东西的,那我们就开始吧�� 创建好后当前文件夹下会出现红框内两个文件 在build setting里搜索 defin...
iOS使用Charts框架绘制—饼状图
努力，可能成功！放弃，注定失败！
06-16 1万+
首先先看一下效果: 饼状图 一、创建饼状图对象 创建饼状图对象用到类是PieChartView.h, 代码如下: self.pieChartView = [[PieChartView alloc] init]; self.pieChartView.backgroundColor = BgColor; [self.view addSubview:self.pieChartView];
iOS开发 - 饼图
weixin_34174132的博客
02-14 84
2019独角兽企业重金招聘Python工程师标准>>> ...
iOS Objective-C 自定义饼状图
peanut的博客
04-19 962
前些天项目中使用了饼状图，现在开发完做下记录。////  PieChartView.h#import &lt;UIKit/UIKit.h&gt;@protocol PieChartViewDelegate@required-(NSInteger)getChartRows;-(NSString*)getChartName:(NSInteger)row;-(CGFloat)getChartRate:(...
opencv目标检测与识别（传统的目标检测方法）
热门推荐
weixin_43955530的博客
06-18 5万+
目标检测用来确定图像的某个区域是否含有要识别的对象，计算机视觉中有很多目标检测和是别的技术，这里介绍： 梯度直方图（Histogram of Oriented Gradient，HOG），图像金字塔（image pyramid），滑动窗口（sliding window） 与特征检测算法不同，这些算法是互补的，在梯度直方图（HOG）里面会用到滑动窗口技术。 1.HOG 梯度直方图 HOG描述符：HO...
利用opencv和mediapip实现对虚拟图像的多张缩放和移动
qq_44599368的博客
12-02 657
目录 一、单张虚拟图像的缩放和移动 1.图片素材 2.代码如下： 3. 效果展示 二、多张虚拟图像的移动 1.图片素材 2.代码如下： 3.效果如下： 三、多张图片缩放 1.代码如下： 2.效果如下： 四、多张图片的缩放和移动 1.代码如下： 2.效果如下： 提示：cvzone、mediapip的相关文档，参考：Hands - mediapipe 一、单张虚拟图像的缩放和移动 1.图片素材 本次使用一张200*200的.jpg图片， 2.代码如下： ...
Vue指令、生命周期、Axios异步请求方式
最新发布
NeilNiu
04-28 1043
Vue 是一款用于构建用户界面的的JavaScript框架。
element-ui 饼图
12-27
其中，Element-UI 提供了饼图（Pie）组件，用于展示数据的占比关系。 Element-UI 的饼图组件提供了以下特性和功能： 1. 数据驱动：饼图组件通过传入数据来展示不同数据项的占比关系。 2. 自定义样式：可以通过配置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值