Axure制作动态的饼图和折线图

饼图效果:

折线图效果:

饼图的实现比较简单,通过数值百分比计算角度旋转元件就能够实现。

折线图就比较复杂,里面涉及几个关键数值的计算:

  • 点的位置:通过文本框的数值计算点的y轴坐标。
  • 线的长度:通过两点间的x轴距离和y轴距离计算线的长度(勾股定理)。
  • 线的角度:使用atan2函数计算两点间线段与水平线的夹角。
  • 线的位置:通过图表顶部y轴坐标和两点的y轴坐标计算线的位置。

以上是两个交互案例的简单介绍,具体的实现过程详解,等我有时间再写教程。

实际上理解了原理,做起来也很简单。

虽然,不建议在没有严格要求的情况下把原型做的比较复杂,但是如果直接复制或者稍作修改就能够使用的话,也不会增加多少工作量。

体验地址:

http://k7vql2.axshare.com/#c=2 折线图

http://m1r8q8.axshare.com/#c=2 饼图

源文件下载地址:【下载饼图】【下载折线图

提示:源文件使用Axure RP 8.1.0.3366制作,使用其它版本打开可能存在Bug。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure制作动态的饼图和折线图

喜欢 (10)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. :mrgreen: 小楼你好牛逼啊
    小楼一夜风起云涌2017-11-14 13:48 回复
  2. 牛逼啊
    jcl20062017-11-14 13:50 回复
  3. 棒棒哒
    小楼30秒2017-11-14 17:47 回复