登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

iOS——用可旋转的饼状图来展示数据

来自: 李世铿 分类: iOS精品源码 上传时间: 2016-4-20 17:10:54
Tag:饼图 饼状图 旋转 图表 chart

项目介绍:

前言
 最近做的一个需求中,需要用旋转的饼状图来展示数据。在github上找了一圈,发现竟然没有现成的轮子,于是看了别人源码后就自己实现了一下,下面看看怎么完成这种效果。注意以下代码是用swift实现的

思路分析
看到下面这个效果,切入点应该是怎么生成这个饼状图,然后再让饼状图旋转

1.gif




怎么生成饼状图(UIBezierPath)
首先是要新建一个CAShapeLayer,这是一个继承CALayer的类。可能你对CALayer比较陌生,不过做iOS一定不会对UIView陌生,每个UIView都有一个layer属性,用来设置一些圆角、阴影等效果。至于为什么有UIView了,还要加一个layer,可以参考这本书iOS核心动画高级技巧,layer的存在是为了让OSX和iOS两个平台能兼容,在OSX中,NSView就对应了layer。

有了CAShapeLayer后,设置其几个属性:
  • path,这里我们用到UIBezierPath,贝塞尔曲线来提供圆形轨迹。
  • lineWidth: 圆环的宽度
  • strokeColor:画笔颜色
  • strokeStart:画笔起始点,取值范围0.0-1.0
  • strokeEnd:画笔结束点,取值范围0.0-1.0

    单个饼状图的生成代码如下:
    [Objective-C] 查看源文件 复制代码
    private func generateLayers(radius:CGFloat, layerFrameWidth:CGFloat, percentageStart:CGFloat, percentageEnd:CGFloat) -> CAShapeLayer{
      let path = UIBezierPath(arcCenter: CGPointMake(layerWidth, layerWidth), radius: radius, startAngle: CGFloat(-M_PI_2), endAngle: CGFloat(3 * M_PI_2) , clockwise: true)
      let pieLayer = CAShapeLayer()
      pieLayer.path = path.CGPath
      pieLayer.lineWidth = lineWidth
      pieLayer.strokeColor = UIColor(hue: percentageEnd, saturation: 0.5, brightness: 0.75, alpha: 1.0).CGColor
      pieLayer.fillColor = nil
      pieLayer.strokeStart = percentageStart
      pieLayer.strokeEnd = percentageEnd
      return pieLayer
    }
    可以看到,通过指定贝塞尔曲线的圆心arcCenter,半径radius,开始角度startAngle、结束角度endAngle、绘制方向clockwise来生成一个轨迹path。
    然后就是通过指定画笔的颜色strokeColor和宽度lineWidth以及起始点位置strokeStart和结束位置strokeEnd,来画出一部分圆环(饼状图)。
    不得不说UIBezierPath真是特别好用,因为我刚开始不懂时,尝试用CoreGraphics去画,那感觉真是想死。


全部的饼状图拼接在一起,就成了一个圆环,代码如下
[Objective-C] 查看源文件 复制代码
private func setupRotateLayers(){

    containerLayer = CAShapeLayer()
    containerLayer.frame = CGRectMake(0, 0, self.bounds.width, self.bounds.width)
    var percentageStart:CGFloat = 0
    var percentageEnd:CGFloat = 0

    for i in 0...dataItem.count - 1{
        percentageEnd += dataItem[i] / itemValueAmount
        let pieLayer = generateLayers(radius, layerFrameWidth: layerWidth, percentageStart: percentageStart, percentageEnd: percentageEnd)
        containerLayer.addSublayer(pieLayer)
        percentageStart = percentageEnd
    }

    gradientMask(radius, width: layerWidth)
    if dataItem.count > 0{
        let initRotateRadian = -CGFloat(M_PI) * dataItem[0] / itemValueAmount
        rotateContainerLayerWithRadian(initRotateRadian)
    }

    self.layer.addSublayer(containerLayer)
}

首先需要一个容器container来收集这些小块的饼状图,所以先是生成了一个containerLayer,然后根据外部传入的数据dataItem来计算每个饼状图的所占比例percentageStart和percentageEnd,并转化为饼状图的开始角度和结束角度。
后面的gradienMask用来做一个渐变显示的效果,接下去的代码是初始化旋转的角度。


饼状图的旋转(CoreAnimation)旋转一个layer,我最开始想用重绘来实现,后面发现用CoreAnimation似乎更简单。
代码示例如下
[Objective-C] 查看源文件 复制代码
func reDraw(index:Int){
    var curIndex = index - 1
    if index == 0{
        curIndex = dataItem.count - 1
    }
    var rotateRadian = dataItem[curIndex] / itemValueAmount + dataItem[index] / itemValueAmount
    rotateRadian = -rotateRadian * CGFloat(M_PI)
    rotateContainerLayerWithRadian(rotateRadian)
}
private func rotateContainerLayerWithRadian(radian:CGFloat){

    let myAnimation = CABasicAnimation(keyPath: "transform.rotation")
    let myRotationTransform = CATransform3DRotate(containerLayer.transform, radian, 0, 0, 1)
    if let rotationAtStart = containerLayer.valueForKeyPath("transform.rotation") {

        myAnimation.fromValue = rotationAtStart.floatValue
        myAnimation.toValue = CGFloat(rotationAtStart.floatValue) + radian
    }
    containerLayer.transform = myRotationTransform
    myAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    containerLayer.addAnimation(myAnimation, forKey: "transform.rotation")
}
[font=Tahoma, Helvetica, SimSun, sans-serif]


旋转的时候会用一个index来做标记,记住当前的位置,所以调用reDraw时传入下一个index就可以完成旋转到下一个饼状图的操作。可以看到旋转角度的计算是rotateRadian = dataItem[curIndex] / itemValueAmount + dataItem[index] / itemValueAmount,需要取数组左右元素值的各一半。然后传入rotateContainerLayerWithRadian函数,通过这个函数来执行旋转操作。
myAnimation是用CABasicAnimation创建的一个动画,这里要特别留意其参数keyPath,我以前学CoreAnimation时对这个参数不以为意,然后怎么调试效果都出不来,白白浪费了好多时间。其实这个transform.rotation可以在苹果的官方文档中查到,特指layer旋转的属性。
然后用CATransform3DRotate来创建一个transform,直接赋值给containerLayer.transform就可以了,留意一下角度换算就没问题了。
fromValue和toValue应该是最熟悉的两个属性了,fromValue表示动画开始前的属性状态,toValue表示动画结束后的属性状态。
最后将配置好的myAnimation添加到containeLayer就OK了,系统会自动去执行这一部分动画的。

后话
这部分代码仅分享了一种实现方法,后期还会继续改进,比如传入的不只是dataItem,还应该有自定义的color,以及每一部分的百分比,旋转开始位置等等。



文/Jerry在种草(简书作者)



相关源码推荐:

我来说两句
*滑动验证:
所有评论(29)
末日孤舰 2016-4-25 18:34:37
很给力,Code4App有你更精彩!
回复
千夏 2016-4-25 21:16:07
感谢分享,Code4App有你更精彩:)
回复
SeriousLifeFei 2016-4-28 11:02:51
虽不明,但觉厉!
回复
火之玉 2016-5-20 17:27:15
淡定,淡定,淡定……
回复
KWunTong 2016-6-1 17:33:37
淡定,淡定,淡定……
回复
Michael-Whool 2016-6-14 15:22:56
很给力,Code4App有你更精彩!
回复
88Q 2016-7-23 01:27:48
我只是路过打酱油的。
回复
code4app热心网友 2016-7-26 14:05:05
楼主用心了,内容非常精彩。
回复
ogqs0493 2016-8-8 14:37:48
学习学习!
回复
123下一页
提取码:  下载次数:27 状态:已购或VIP 售价:0(原价:5)金钱 下载权限:初级码农 
1382 0 27
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表