拿来即用——报表画图(饼图,速率图,表格图,柱状图)

栏目: IOS · 发布时间: 4年前

内容简介:前言因为项目需求,需要画一些报表图。如果项目中涉及到布局复杂,数据多变,动效堆积的页面,一般都是推荐H5来写。我一开始是拒绝这个需求的,但是人微言轻,我的腰包并不足以支撑我顶风尿三丈这股魄力。

拿来即用——报表画图(饼图,速率图,表格图,柱状图)

前言

因为项目需求,需要画一些报表图。如果项目中涉及到布局复杂,数据多变,动效堆积的页面,一般都是推荐H5来写。我一开始是拒绝这个需求的,但是人微言轻,我的腰包并不足以支撑我顶风尿三丈这股魄力。

然后就在网上找相关的第三方,比如熟知的iOS-ECharts。但是最终没有采用,主要原因就是:

1.ECharts都是swift语言写的,而项目采用的是OC,语言不统一,代码强迫症不能忍
2.ECharts提供的样式非常多,很大部分项目中都用不到,导致很多代码无用
3.为了代码稳定性,能不用第三方就不用第三方
4.改动量多,学习成本大
5.懒

所以就产生了这个玩意:

demo

大家只需要导入下面这个文件夹就好了:

拿来即用——报表画图(饼图,速率图,表格图,柱状图)

它们分别是:

饼图(速率图)0

饼图(速率图)1

表格图

单柱图

双柱图

使用非常简单,我们就拿最简单的饼图(速率图)说说吧。

- (void)initTLChartRateView0{
    
    self.rateView = [TLChartRateView new];
    self.rateView.frame = CGRectMake((TLDeviceWidth -RateViewWidth)/2, 150 +NavBarHeight, RateViewWidth, RateViewHeight);
    [self.view addSubview:self.rateView];
}

你看是不是非常简单。

考虑到每个人项目情况不一样,所以很多UI属性我一开始就设置为公开的,扩展性强,同时添加了注释方便大家修改。同样我们拿最简单的饼图(速率图)说说吧。

@property (nonatomic, assign) CGFloat        needleRadius;//针头的半径
@property (nonatomic, strong) UIColor       *needleColor;//针的颜色

@property (nonatomic, assign) CGFloat        lineWidth;//底部虚线宽度
@property (nonatomic, strong) UIColor       *lineColor;//底部虚线颜色

@property (nonatomic, copy  ) NSString      *title;//title数据
@property (nonatomic, assign) CGFloat        titleFont;//title字号
@property (nonatomic, strong) UIColor       *titleColor;//title字色

@property (nonatomic, assign) CGFloat        arcWidth;//环形宽度
@property (nonatomic, copy  ) NSString      *arcData;//环形比例数据
@property (nonatomic, strong) UIColor       *arcColor0;//环形色
@property (nonatomic, strong) UIColor       *arcColor1;//环形默认色

@property (nonatomic, strong) NSArray       *defaultTextArr;//环形里面数据
@property (nonatomic, assign) CGFloat        defaultTextFont;//环形里面字号
@property (nonatomic, strong) UIColor       *defaultTextColor;//环形里面字色

哇,真的很简单呢。

而且调用reloadData方法还可以刷新数据,另外还给表格,柱状图添加了点击事件,详情可以下载demo看看代码。

大家可能不理解为什么我要写两个饼图(速率图),你们观察最上面的GIF就知道第一个没有动画,第二个是有的。

为什么会这样呢?

因为第一个饼图(速率图)我只创建了一个图层CALayer,所有的画线都在这一个图层处理的,这样会导致创建/刷新时候动画的种类,复杂度,酷炫程度都会大打折扣。而第二个饼图(速率图)我则进行了优化,创建一个容器图层,上面再渲染其他的图层,我们在做动画处理的时候只需要在相应的图层上添加动画就行了。

如果对于动画部分,需要进一步了解其中的差别,还可以看看表格图和单柱图。这两个也是在一个图层上面进行了所有的画线处理,但他们的动画采用了取巧的方式。总之,要么为了美观而增加代码量,要么就像个直男一样简单干脆。

当然,我个人推荐是饼图(速率图)1这种方式的,不光光是为了动效,还为了图层CALayer的封装,还为了日后上层捉摸不透的想法而产生的改动。

如果大家有什么疑问或者能帮忙改进的地方,欢迎评论。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JavaScript实战

JavaScript实战

Frank W. Zammetti / 张皛珏 / 人民邮电出版社 / 2009-8 / 59.00元

随着Ajax的兴起,JavaScript迅速地从改进网站的配角晋升为开发专业级高质量应用的主角,成为了Web开发中不可缺少的一员。 本书主要通过10个具体项目,包括构建可扩展的JavaScript库、使用GUI窗口小部件框架、开发支持拖放的购物车和编写JavaScript游戏等,讲述JavaScript最佳实践、Ajax技术,以及一些流行的JavaScript库,如Rico、Dojo、scr......一起来看看 《JavaScript实战》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具