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

AxureRP8.0资源 小楼一夜听春语 7563℃ 0评论

饼图效果:

折线图效果:

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

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

  • 点的位置:通过文本框的数值计算点的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 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


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

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(10)个小伙伴在吐槽
  1. :mrgreen: 小楼你好牛逼啊
    小楼一夜风起云涌2017-11-14 13:48 回复
  2. 牛逼啊
    jcl20062017-11-14 13:50 回复
  3. 棒棒哒
    小楼30秒2017-11-14 17:47 回复
  4. 最多只能转到50%,再多转就漏馅了
    傲天落雪2017-11-30 16:00 回复
    • 小楼一夜听春语
      想转的更多,每个颜色需要两个动态面板结合来完成。
      小楼一夜听春语2017-12-01 08:56 回复
  5. 牛 这怎么做的
    学习者2017-12-27 14:00 回复
  6. 水平线旋转后x坐标不对了
    老牛2018-01-24 11:33 回复
  7. 简直无敌了
    扶风2018-02-01 11:56 回复
  8. 不能下载啊
    南岸2018-02-02 16:54 回复
  9. 有没有教程啊
    LFUTCIV9G2018-08-06 14:21 回复