第三方Charts绘制图表四种形式:饼状图,雷达图,柱状图,直线图
对于第三方框架Charts(Swift版本,在OC项目中需要添加桥接头文件),首先要解决在项目中集成的问题,集成步骤:
一、下载Charts框架
下载地址:https://github.com/danielgindi/Charts.
解压后的文件夹里面的内容是这个样子的,如下图:
下载完成后,仔细看一下所需环境,很重要!如下图:
二、新建工程,导入Charts.xcodeproj
工程
1.新建工程
新建工程,取名为ChartsDemo
.
2.复制Charts
整个文件夹到项目ChartsDemo
文件夹中
如下图:
3.导入Charts.xcodeproj
工程
将Charts
文件夹中的Charts.xcodeproj
工程文件导入到ChartsDemo
工程中,注意导入的是Charts.xcodeproj
工程,而不是Charts
文件夹,如下图:
4.添加Charts.framework
点击创建的工程文件-->General->找到Embedded Binaries行,点击+号添加Charts.framework
如下图:
三、建立OC和Swift的桥接文件
在ChartsDemo
工程中新建一个Swift文件,名字随便取,这时候会提示是否建立桥接文件,直接选Create Bridging Header
选项,如下图:
新建完成后,会自动生成一个桥接文件,如下图:
四、设置编译选项及引入Charts
1.设置编译选项
点击工程文件-->Build Settings -> Embedded Content Contains Swift Code 选项,设置为Yes,如下图:
2.在桥接文件中引入Charts
3.在对应的ViewController.m
中引入相关头文件,如图:
引入完成之后,编译一下,如果有错,Clean一下再次编译,编译没有错误说明导入成功.
五、测试
在ViewController.m
中进行测试,代码如下:
BarChartView *chatView = [[BarChartView alloc] initWithFrame:CGRectMake(10, 100, 300, 300)];
[self.view addSubview:chatView];
Charts
完毕!接下来就是绘制各类图表的代码(简单的创建视图,具体代码方法看Demo):
饼状图:
//创建饼状图
self.pieChartView = [[PieChartView alloc] initWithFrame:CGRectMake(20, 80, f_Device_w-40, 300)];
[self.view addSubview:self.pieChartView];
//基本样式
[self.pieChartView setExtraOffsetsWithLeft:30 top:0 right:30 bottom:0];//饼状图距离边缘的间隙
self.pieChartView.usePercentValuesEnabled = YES;//是否根据所提供的数据, 将显示数据转换为百分比格式
self.pieChartView.dragDecelerationEnabled = YES;//拖拽饼状图后是否有惯性效果
self.pieChartView.drawSliceTextEnabled = YES;//是否显示区块文本
//空心饼状图样式
self.pieChartView.drawHoleEnabled = YES;//饼状图是否是空心
self.pieChartView.holeRadiusPercent = 0.5;//空心半径占比
self.pieChartView.holeColor = [UIColor clearColor];//空心颜色
self.pieChartView.transparentCircleRadiusPercent = 0.52;//半透明空心半径占比
self.pieChartView.transparentCircleColor = [UIColor colorWithRed:210/255.0 green:145/255.0 blue:165/255.0 alpha:0.3];//半透明空心的颜色
//实心饼状图样式
// self.pieChartView.drawHoleEnabled = NO;
//饼状图中间描述
if (self.pieChartView.isDrawHoleEnabled == YES) {
self.pieChartView.drawCenterTextEnabled = YES;//是否显示中间文字
//普通文本
// self.pieChartView.centerText = @"饼状图";//中间文字
//富文本
NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"饼状图"];
[centerText setAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:16],NSForegroundColorAttributeName: [UIColor orangeColor]} range:NSMakeRange(0, centerText.length)];
self.pieChartView.centerAttributedText = centerText;
}
//饼状图描述
self.pieChartView.descriptionText = @"饼状图示例";
self.pieChartView.descriptionFont = [UIFont systemFontOfSize:10];
self.pieChartView.descriptionTextColor = [UIColor grayColor];
//饼状图图例
self.pieChartView.legend.maxSizePercent = 1;//图例在饼状图中的大小占比, 这会影响图例的宽高
self.pieChartView.legend.formToTextSpace = 5;//文本间隔
self.pieChartView.legend.font = [UIFont systemFontOfSize:10];//字体大小
self.pieChartView.legend.textColor = [UIColor grayColor];//字体颜色
self.pieChartView.legend.position = ChartLegendPositionBelowChartCenter;//图例在饼状图中的位置
self.pieChartView.legend.form = ChartLegendFormCircle;//图示样式: 方形、线条、圆形
self.pieChartView.legend.formSize = 12;//图示大小
//为饼状图提供数据
self.pieCData = [self setData];
self.pieChartView.data = self.pieCData;
//设置动画效果
[self.pieChartView animateWithXAxisDuration:1.0f easingOption:ChartEasingOptionEaseOutExpo];
雷达图:
//创建雷达图对象
self.radarChartView = [[RadarChartView alloc] initWithFrame:CGRectMake(20, 80, f_Device_w-40, 300)];
[self.view addSubview:self.radarChartView];
self.radarChartView.delegate = self;
self.radarChartView.descriptionText = @"";//描述
self.radarChartView.rotationEnabled = YES;//是否允许转动
self.radarChartView.highlightPerTapEnabled = YES;//是否能被选中
//雷达图线条样式
self.radarChartView.webLineWidth = 0.5;//主干线线宽
self.radarChartView.webColor = [self colorWithHexString:@"#c2ccd0"];//主干线线宽
self.radarChartView.innerWebLineWidth = 0.375;//边线宽度
self.radarChartView.innerWebColor = [self colorWithHexString:@"#c2ccd0"];//边线颜色
self.radarChartView.webAlpha = 1;//透明度
//设置 xAxi
ChartXAxis *xAxis = self.radarChartView.xAxis;
xAxis.labelFont = [UIFont systemFontOfSize:15];//字体
xAxis.labelTextColor = [self colorWithHexString:@"#057748"];//颜色
//设置 yAxis
ChartYAxis *yAxis = self.radarChartView.yAxis;
yAxis.axisMinValue = 0.0;//最小值
yAxis.axisMaxValue = 150.0;//最大值
yAxis.drawLabelsEnabled = NO;//是否显示 label
yAxis.labelCount = 6;// label 个数
yAxis.labelFont = [UIFont systemFontOfSize:9];// label 字体
yAxis.labelTextColor = [UIColor lightGrayColor];// label 颜色
//为雷达图提供数据
self.radarCData = [self setData];
self.radarChartView.data = self.radarCData;
[self.radarChartView renderer];
//设置动画
[self.radarChartView animateWithYAxisDuration:0.1f];
柱状图:
//添加barChartView
self.barChartView = [[BarChartView alloc] initWithFrame:CGRectMake(20, 80, f_Device_w-40, 300)];
self.barChartView.delegate = self;//设置代理
[self.view addSubview:self.barChartView];
//基本样式
self.barChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.barChartView.noDataText = @"暂无数据";//没有数据时的文字提示
self.barChartView.drawValueAboveBarEnabled = YES;//数值显示在柱形的上面还是下面
self.barChartView.drawHighlightArrowEnabled = NO;//点击柱形图是否显示箭头
self.barChartView.drawBarShadowEnabled = NO;//是否绘制柱形的阴影背景
//交互设置
self.barChartView.scaleYEnabled = NO;//取消Y轴缩放
self.barChartView.doubleTapToZoomEnabled = NO;//取消双击缩放
self.barChartView.dragEnabled = YES;//启用拖拽图表
self.barChartView.dragDecelerationEnabled = YES;//拖拽后是否有惯性效果
self.barChartView.dragDecelerationFrictionCoef = 0.9;//拖拽后惯性效果的摩擦系数(0~1),数值越小,惯性越不明显
//X轴样式
ChartXAxis *xAxis = self.barChartView.xAxis;
xAxis.axisLineWidth = 1;//设置X轴线宽
xAxis.labelPosition = XAxisLabelPositionBottom;//X轴的显示位置,默认是显示在上面的
xAxis.drawGridLinesEnabled = NO;//不绘制网格线
xAxis.spaceBetweenLabels = 4;//设置label间隔,若设置为1,则如果能全部显示,则每个柱形下面都会显示label
xAxis.labelTextColor = [UIColor brownColor];//label文字颜色
//右边Y轴样式
self.barChartView.rightAxis.enabled = NO;//不绘制右边轴
//左边Y轴样式
ChartYAxis *leftAxis = self.barChartView.leftAxis;//获取左边Y轴
leftAxis.labelCount = 5;//Y轴label数量,数值不一定,如果forceLabelsEnabled等于YES, 则强制绘制制定数量的label, 但是可能不平均
leftAxis.forceLabelsEnabled = NO;//不强制绘制制定数量的label
leftAxis.showOnlyMinMaxEnabled = NO;//是否只显示最大值和最小值
leftAxis.axisMinValue = 0;//设置Y轴的最小值
leftAxis.startAtZeroEnabled = YES;//从0开始绘制
leftAxis.axisMaxValue = 105;//设置Y轴的最大值
leftAxis.inverted = NO;//是否将Y轴进行上下翻转
leftAxis.axisLineWidth = 0.5;//Y轴线宽
leftAxis.axisLineColor = [UIColor blackColor];//Y轴颜色
leftAxis.valueFormatter = [[NSNumberFormatter alloc] init];//自定义格式
leftAxis.valueFormatter.positiveSuffix = @" $";//数字后缀单位
leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置
leftAxis.labelTextColor = [UIColor brownColor];//文字颜色
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字体
//网格线样式
leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];//设置虚线样式的网格线
leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//网格线颜色
leftAxis.gridAntialiasEnabled = YES;//开启抗锯齿
//添加限制线
ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@"限制线"];
limitLine.lineWidth = 2;
limitLine.lineColor = [UIColor greenColor];
limitLine.lineDashLengths = @[@5.0f, @5.0f];//虚线样式
limitLine.labelPosition = ChartLimitLabelPositionRightTop;//位置
[leftAxis addLimitLine:limitLine];//添加到Y轴上
leftAxis.drawLimitLinesBehindDataEnabled = YES;//设置限制线绘制在柱形图的后面
//图例说明样式
self.barChartView.legend.enabled = NO;//不显示图例说明
// self.barChartView.legend.position = ChartLegendPositionBelowChartLeft;//位置
//右下角的description文字样式
self.barChartView.descriptionText = @"";//不显示,就设为空字符串即可
// self.barChartView.descriptionText = @"柱形图";
self.barCData = [self setData];
//为柱形图提供数据
self.barChartView.data = self.barCData;
//设置动画效果,可以设置X轴和Y轴的动画效果
[self.barChartView animateWithYAxisDuration:1.0f];
折线图:
//添加折线视图LineChartView
self.LineChartView = [[LineChartView alloc] initWithFrame:CGRectMake(20, 80, f_Device_w-40, 300)];
self.LineChartView.delegate = self;//设置代理
[self.view addSubview:self.LineChartView];
//基本样式
self.LineChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.LineChartView.noDataText = @"暂无数据";
//交互样式
self.LineChartView.scaleYEnabled = NO;//取消Y轴缩放
self.LineChartView.doubleTapToZoomEnabled = NO;//取消双击缩放
self.LineChartView.dragEnabled = YES;//启用拖拽图标
self.LineChartView.dragDecelerationEnabled = YES;//拖拽后是否有惯性效果
self.LineChartView.dragDecelerationFrictionCoef = 0.9;//拖拽后惯性效果的摩擦系数(0~1),数值越小,惯性越不明显
//X轴样式
ChartXAxis *xAxis = self.LineChartView.xAxis;
xAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;//设置X轴线宽
xAxis.labelPosition = XAxisLabelPositionBottom;//X轴的显示位置,默认是显示在上面的
xAxis.drawGridLinesEnabled = NO;//不绘制网格线
xAxis.spaceBetweenLabels = 4;//设置label间隔
xAxis.labelTextColor = [self colorWithHexString:@"#057748"];//label文字颜色
//Y轴样式
self.LineChartView.rightAxis.enabled = NO;//不绘制右边轴
ChartYAxis *leftAxis = self.LineChartView.leftAxis;//获取左边Y轴
leftAxis.labelCount = 5;//Y轴label数量,数值不一定,如果forceLabelsEnabled等于YES, 则强制绘制制定数量的label, 但是可能不平均
leftAxis.forceLabelsEnabled = NO;//不强制绘制指定数量的label
leftAxis.showOnlyMinMaxEnabled = NO;//是否只显示最大值和最小值
leftAxis.axisMinValue = 0;//设置Y轴的最小值
leftAxis.startAtZeroEnabled = YES;//从0开始绘制
leftAxis.axisMaxValue = 105;//设置Y轴的最大值
leftAxis.inverted = NO;//是否将Y轴进行上下翻转
leftAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;//Y轴线宽
leftAxis.axisLineColor = [UIColor blackColor];//Y轴颜色
leftAxis.valueFormatter = [[NSNumberFormatter alloc] init];//自定义格式
leftAxis.valueFormatter.positiveSuffix = @" $";//数字后缀单位
leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置
leftAxis.labelTextColor = [self colorWithHexString:@"#057748"];//文字颜色
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字体
//网格线样式
leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];//设置虚线样式的网格线
leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//网格线颜色
leftAxis.gridAntialiasEnabled = YES;//开启抗锯齿
//添加限制线
ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@"限制线"];
limitLine.lineWidth = 2;
limitLine.lineColor = [UIColor greenColor];
limitLine.lineDashLengths = @[@5.0f, @5.0f];//虚线样式
limitLine.labelPosition = ChartLimitLabelPositionRightTop;//位置
limitLine.valueTextColor = [self colorWithHexString:@"#057748"];//label文字颜色
limitLine.valueFont = [UIFont systemFontOfSize:12];//label字体
[leftAxis addLimitLine:limitLine];//添加到Y轴上
leftAxis.drawLimitLinesBehindDataEnabled = YES;//设置限制线绘制在折线图的后面
//描述及图例样式
[self.LineChartView setDescriptionText:@"折线图"];
[self.LineChartView setDescriptionTextColor:[UIColor darkGrayColor]];
self.LineChartView.legend.form = ChartLegendFormLine;
self.LineChartView.legend.formSize = 30;
self.LineChartView.legend.textColor = [UIColor darkGrayColor];
self.lineCData = [self setData];
self.LineChartView.data = self.lineCData;
[self.LineChartView animateWithXAxisDuration:1.0f];
界面效果:
Demo下载:http://download.csdn.net/detail/hbblzjy/9587821
第三方Charts绘制图表四种形式:饼状图,雷达图,柱状图,直线图相关推荐
- 模块的四种形式 模块的调用 循环导入问题 模块的搜索路径 py文件的两种用途 编译python文件 包...
目录 模块的四种形式 什么是模块 模块的四种形式 自定义模块 第三方模块 内置模块 包 使用模块的好处 模块的调用 循环导入问题 模块的搜索路径 py文件的两种用途 编译python文件 包 什么是包 ...
- Python四种形式模块的形式与调用
一.什么是模块? 模块是一系列功能的集合体,而函数是某一个功能的集合体,因此模块可以看成是一堆函数的集合体.一个py文件内部就可以放一堆函数,因此一个py文件就可以看成一个模块.如果这个py文件的文件 ...
- Python模块的四种形式
一.什么是模块? 模块是一系列功能的集合体,而函数是某一个功能的集合体,因此模块可以看成是一堆函数的集合体.一个py文件内部就可以放一堆函数,因此一个py文件就可以看成一个模块.如果这个py文件的文件 ...
- Node.js-提供了四种形式的定时器
1 Node.js提供了四种形式的定时器 2 global.setTimeout(); //一次性定时器 3 global.setInterval(); //周期性定时器 4 global.nextT ...
- 动词ing形式的5种用法_英语语法这样学就对了!动词-ing结构的特征和四种形式是?...
想彻底学好英语一定要善于总结语法!动词-ing结构的特征和四种形式都是什么? 想彻底学好英语,语法这一关是一定要过的.我将通过这个平台定期更新实用.常用的英语语法知识解读,直至覆盖完全部的英语语法知识 ...
- git 提交代码命令_提交代码:git push 命令的四种形式
Git是一种分布式版本控制系统,可以高效地处理项目的版本管理.若对Git的基本使用还不太了解,可以先看一下下面的文章. Git 常用命令 使用Git的工作流程:修改.暂存.提交.推送 Git操作:在多 ...
- C语言复数代数式转化成极坐标式,问题:正弦量的相量是复数。 复数有四种表示形式,四种形式可以相互转换。其中代数式和极坐标形式应用得最为广泛。...
问题:正弦量的相量是复数. 复数有四种表示形式,四种形式可以相互转换.其中代数式和极坐标形式应用得最为广泛. 更多相关问题 有3个整数a.b.c,由键盘输入,利用条件表达式,输出其中最大的数. #in ...
- 软文发布实用技巧:软文发布常见的四种形式
软文发布常见的四种形式 一.随处可见的轰炸形式 过年四月就是在各个地方各个时间段都投放广告,这种形式虽然显得有些杂乱无章,但是 由于媒体投放量比较大,所以人们接受信息也会相对较多,所以在一定程度上也达 ...
- 傅里叶变换的四种形式
此文转自知乎的jinjin 傅里叶变换的四种形式 - 知乎 傅里叶变换是信号的一种描述方式,通过增加频域的视角,将时域复杂波形表示为简单的频率函数,获得时域不易发现的与信号有关的其他特征. 根据时间域 ...
- 柯西-施瓦茨不等式(Cauchy-Schwarz Inequality)的四种形式
柯西-施瓦茨不等式其实是有四种不同的形式的,如果只知道其中一种,看论文的时候肯定会陷入迷惑,下面我们来看看柯西-施瓦茨不等式的四种形式: 一,在实数域中 设ai,bi∈R(i=1,2,..,n)\ a ...
最新文章
- Ant在MyEclipse中的配置总结
- pu learning的建模实践,半监督学习的好方法!
- qt学习之路3 ---信号与槽机制
- torch.nn.Module()
- python3 ftp服务器_python3实现ftp服务功能(服务端 For Linux)
- 基于matlab的音乐合成论文,基于matlab软件的音乐合成毕业论文.doc
- MSP借助五招让中小企业签约云计算服务
- python 欢迎自己程序编写_神操作!一句查询让Python帮忙自己写程序
- kali Linux渗透测试教程.pdf
- 使用IDEA创建Android项目
- 区分联通、移动、电信 号码的策略
- 高精度轻量级图像分割SOTA模型PP-LiteSeg开源
- Java毕设设计-高校运动会管理系统
- Andro - Multipurpose OpenCart 2.X 自适应主题模板 ABC-0651-02
- 为什么要做特征归一化/标准化?
- python实现双屏情况下,第二个屏播发视频
- html下拉列表不居中_学习之路-前端-笔记-一、HTML笔记(转)
- 用Java分割和合并PDF文件
- Matlab中的逻辑运算
- 照片滤镜--为图片进行调色