【Axure交互教程】图表载入效果（柱状图/折线图/饼图）
作品名称：图表载入效果
作品编号：Case004
软件版本：Axure9
作品类型：交互案例
我们在设计原型时会经常使用到图表，给图表加一点载入时的动效会让图表更加生动。今天我们来简单介绍下在Axure中实现柱状图、折线图、饼图载入效果的方法。
原型预览链接（附源文件下载链接）：http://daisyaxure.com/demo/Case004
柱状图
1.拖入一个【矩形】元件，设置初始的高度为：1px,宽度和填充颜色自定。
2.矩形上方拖入一个【文本标签】，设置数字文本，初始隐藏。
3.给上述矩形元件添加一个【载入时】的效果，高度自定，动画选择【线性】【500s】效果,锚点的位置选择底部；显示【2】中拖入的文本标签，动画选择【逐渐】【500s】。
查看效果
折 线 图
1.使用【钢笔工具】绘制出我们想要的折线图，完成后只需要选中画完的折线图右键选择【曲线连接各点】就可以生成曲线图。
2.将绘制完成的折线图右键【转化为动态面板】，设置此动态面板的宽度为1px。
3.给此动态面板添加一个【载入时】的交互，设置尺寸为动态面板原本的尺寸，动画选择【线性】【500s】效果即可。
查看效果
饼 图
1.拖入一个【圆形】元件，填充颜色为紫色，命名为：【purple】，调整好大小和位置后选中此元件，右键【选择形状】，选择第四个形状，拖动缺口处的轴调整此圆形的角度。
2.将其右键转换为动态面板，命名为【purple- panel】；
3.用上述方法我们再制作出3个圆形，所有饼图的角度加起来为360度，且每个圆形的起点位置一致。
4.将这4个圆形所在的动态面板叠放在一起，同时选中后右键转换为动态面板，命名为【panel】。
5.给动态面板【panel】添加载入时【旋转】的交互，使每一个圆形所在的动态面板通过旋转一定的角度，实现载入的动画效果。
在饼图的最上方拖入一个白色的圆形，输入文字，即可制作出圆环的效果。
更多高保真原型及交互案例请访问：http://daisyaxure.com
【Axure交互教程】图表载入效果（柱状图/折线图/饼图）相关推荐
- 从后端数据库获取数据并传值到前端vue项目的echarts柱状图/折线图/饼图里
不同图表的数据获取有一定的区别 在这些区别上花了不少功夫试验,把最后成功的方法做个记录,如果有类似项目要做的话,也可看看当个参考. 后端 后端都大同小异,方法上没有区别,在这里以柱状图为例. sql: ...
- Java后台生成图表——主代码（折线图，饼状图，柱状图，-》并产出图片PDF或其他格式的图片内容）
声明: 本文采用的数据均来源于网络,本人只用于学习记录,若有侵权,还望能及时联系. Maven 的 POM 依赖 <!--必要--><!--用于jfreechart生成图片 --&g ...
- Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程
Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程 用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...
- java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格；
本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...
- php制作曲线柱形图的框架,用GD图库生成横竖柱状图折线图的类_php
最近写的一个GD图库用以生成横竖柱状图和折线图的类库,算是一个教学例程吧 Class ImageReport{ var $X;//图片大小X轴 var $Y;//图片大小Y轴 var $R;//背影色 ...
- 柱状图折线图混合使用
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>柱状图 ...
- Origin: 双Y轴 | 柱状图 | 折线图 | 垂线散点图的结合绘制
origin | 双Y轴 | 添加图层 | 柱状图 | 折线图 | 散点图 一.前言 二.数据准备 三.绘图 3.1 图层1-绘制柱状图 3.2 图层2-折线图的绘制 3.2.1 添加新图层-折线图 ...
- 原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
- 【python科研绘图】双y轴并列柱状图+折线图+数据表结合，并封装图形绘制函数
双y轴并列柱状图+折线图+数据表结合 1. 论文原图 2 数据准备 3 代码实现步骤拆解 3.1 导入第三方库 3.2 数据赋值 3.3 数据绘图 4 函数封装 手动反爬虫: 原博地址 https:/ ...
最新文章
- Go 学习笔记（32）— 类型系统（命名类型、未命名类型、底层类型、类型强制转换、类型别名和新声明类型）
- 分布式存储(ceph)技能图谱（持续更新）
- Mongodb WiredTiger存储引擎特性
- struts2 action之间参数的传递
- java 格式匹配,java匹配电话格式的正则表达式
- UVa1153 Keep The Customer Satisfied(贪心)
- linux 踢出其他用户,Linux查看当前登录用户并踢出用户
- zookeeper 3.4.6安装
- C++ const的使用
- 如何判断两个IP地址是不是处于同一网段？
- arp攻击 python_python之arp攻击
- Android Studio开发-高效插件强烈推荐
- Python入门--方法重写
- nginx request_uri接收到的参数只有一个
- 威纶通触摸屏部分元件下载后不显示且编辑时无法选择
- 你的伙伴对你最大会话_TeamViewer许可证对您与伙伴的最大会话有所限制解决办法...
- LeetCode-717. 1比特与2比特字符
- 50句哲理 语录（二）
- 开闭原则（Open-Closed Principle,OCP）
- 6-4布线问题（分支限界）