【Axure教程】能增删数据的柱状图
柱状图是可视化视图里一个非常重要的工具,在画原型图时,我们也经常用到柱状图。今天作者就教大家如何在Axure里制作一个能增删输入的柱状图模板,效果包括:
查看具体数据——鼠标移入柱状图时,改柱状图的背景高亮显示,显示提示里可以查看具体数据
添加新柱状——输入人名和数值后,点击添加按钮可以自动生成对应的柱状图
坐标自动调整——如果新增的柱状的数值大于坐标轴最大值,坐标轴会自动更新,并且前面的柱状图也会自动适应新的坐标轴
删除柱状——鼠标移入对应柱状后,点击delete键可以删除当前柱状图
复用效果——用中继器制作,在中继器表格里填写数据和坐标轴最大值,即可自动生成柱状图
【原型预览及下载地址】
https://axhub.im/ax9/9a27399d9b2d17a5/#g=1
【制作教程】
一、材料准备
1. 柱状图
柱状图我们用主要用中继器制作,中继器内我们需要以下元件:
1、柱状——用矩形制作即可
2、文本标签——对应柱状的文字
3、背景矩形——用于制作移入变色的效果,这里要设置选中样式的填充颜色
中继器表格里我们需要两列:
1、text——对应柱状的文字
2、count——对应柱状图的数据
2. 坐标和边框线
我们用几个文本标签和水平线制作纵坐标和柱状图的边框线,如下图所示摆放
3.添加数据组
添加数据组,由两个文本框,两个文本标签和一个按钮组成,数值文本框的输入类型设置为number,这样就只能输入数字了。
4.数据弹窗
我们用矩形制作即可,添加阴影,默认隐藏即可。
二、交互制作
1.制作自动生成的柱状图
中继器每项加载时,我用设置文本的交互,将text列的值,设置到中继器了对应柱状文字的文本标签里。
然后用设置尺寸的交互,设置柱状矩形的尺寸,这里涉及数学的计算,他的宽是不变的,关键是高的设置,其实高的设置就是一个比例的关系,例如柱状的高=200px,坐标最大值是5000,柱状的数据是2500,其实就是坐标轴的一般,所以柱状调整后的高应该为100px。设置尺寸的时候锚点在底部
这里默认的柱状图就完成了
2.添加新柱状
鼠标单击添加按钮时,如果两个输入框的值都不为空,我们用添加行的交互,将两个输入框的值,添加到text列和count列,这里就会自动生成柱状图了
如果其中的有输入框为空,后续你们也可以设置弹出提示文字,这里就不详细展开了
但是这样设置会遇到一个问题,就是如果新增的数值大于大于坐标轴的最大值,那么就会出现柱状图超出预定位置的尴尬。所以上面的交互前应该再增加一个条件,就是数据输入框里的文本值如果大于坐标轴的最大值,那我们就要先更新坐标轴。
那么怎么做更新坐标轴呢,我们要先设置自动坐标
3.自动生成坐标轴
在坐标轴载入时,我们设置每个坐标根据最大值来自动获取,案例中是6个坐标,分别为0、1000、2000、3000、4000、5000,5000就是最大值的坐标,0坐标不需要改变,1000的坐标我们可以通过最大值来获取,其实就是最大值乘以五分之一,2000的坐标就是5000乘以五分之二……
所以我们在载入时,用设置文本的交互,根据最大值和对应比例,就可以把其他坐标对应设置好
设置完成之后我们回答添加数据的交互
4.添加新柱状(新增数据大于坐标轴最大值)
如果新增的数据大于坐标轴最大值,这里我们要用设置文本的交互,将输入框里的值设置到坐标最大值里,然后用触发事件,触发每个坐标载入时的交互,这样新的坐标就设置好了。
5.移入高亮效果和显示具体数据
在鼠标移入时,我们用设置选中的交互,将背景矩形设置为真,这样背景矩形就会选中变色了;
然后我们用显示的事件,将数据弹出标签显示出来,用设置文本的交互,将count列的值设置到标签里,这样就可以看到详细的数据了
在鼠标移动时我们用移动的交互,让数据弹出标签跟随鼠标移动,这里需要用到cursor的函数,获取鼠标指针的位置。
鼠标移出时,我们将背景矩形还原,设置为假,就会恢复原来的原色,然后用隐藏的交互将数据标签隐藏起来
6.删除对应柱状图的操作
键盘按键按下时,如果按的是delete键,那我我们就用删除行把鼠标指针所在的当前行删除。
那怎么判断哪一行是鼠标指针所在的行呢?前面我们鼠标移入的时候会选中背景矩形,那我们只需要判断哪个背景矩形被选中了,哪个就是需要被删除的行。
7.框线尺寸自适应
最后,我们还要根据中继器里的数据设置框线的尺寸,宽线的尺寸。
框线组的高是不变的,只有宽度在变,其实就是中继器的宽度,所以我们可以用函数获取中继器的宽度,然后在中继器最后加载完成之后,用设置尺寸的交互,将宽线的宽度设置为和中继器宽度一致。
这样我们就完成了能增删数据的中继器柱状图的原型模板了,下次使用时,只需要在中继器表格中填写数据和坐标轴最大值,即可自动生成交互效果,是不是很方便呢?
那以上就是Axure教程——能增删数据的柱状图的全部内容了,感谢您的阅读,我们下期见~~~
【Axure教程】能增删数据的柱状图相关推荐
- Axure 教程:用中继器做柱状图
本文将教大家如何用AXURE做一个超漂亮的柱状图. 原型预览及下载地址: https://axhub.im/pro/1882d0a30c3301c9 一.效果介绍 二.功能介绍 简单填写中继器内容即可 ...
- AXURE教程:散点图
上一期教会大家如何用axure做堆叠柱状图,本文将教大家如何用AXURE做散点图 效果如下: 原型预览及下载地址: https://axhub.im/pro/1882d0a30c3301c9 一.功能 ...
- 【Axure教程】分类筛选卡片(订单卡片案例)
卡片是系统常用的展示方式,采用卡片式布局能更直观的用户界面.所以作者今天就和大家分享如何在Axure中制作出分类筛选卡片的原型模板,我们已订单卡片为案例,包括以下交互效果: 1.筛选:可以根据卡片不同 ...
- Axure教程:一个通用的app注册/登录页
今天给大家分享一套APP注册/登录界面模板,其中包括本机登录页面,短信验证登录页面,密码登录页面,人脸登录页面,微博.微信.QQ.支付宝登录页面,注册页面,用户协议和隐私条款.该原型使用简单,交互完善 ...
- Axure教程:如何使用Axure中继器元件?
使用之前 在使用之前,我们总得搞清楚我们将要使用的元件是什么东西. 据Axure官网介绍,中继器是一种用于展示模式重复的文本或图标的元件.没看懂?不急,我们先看一下效果演示,然后再一步步把这个效果做出 ...
- plotly基于dataframe数据绘制柱状图(bar plot)
plotly基于dataframe数据绘制柱状图(bar plot) # 构建仿真pandas数据: # 绘制条形图: import plotly as py # 导入plotly库并命名为py im ...
- cufflinks基于dataframe数据绘制柱状图(bar plot)、堆叠柱状图(stacked bar plot)
cufflinks基于dataframe数据绘制柱状图(bar plot).堆叠柱状图(stacked bar plot) # bar plot # from chart_studio import ...
- scrapy爬虫储存到mysql_详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
获取要爬取的URL 爬虫前期工作 用Pycharm打开项目开始写爬虫文件 字段文件items # Define here the models for your scraped items # # S ...
- Axure教程:如何使用动态面板?动态面板功能详解
写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于Axure动态面板 动态面板是a ...
最新文章
- python数据分析实训大纲,数据分析大赛考纲:(二)Python数据分析应会部分
- vue-router 去掉#
- JVM堆内存控制/分代垃圾回收
- 无偏PU learning简介
- mysql 5.7 启动脚本_MySQL数据库 5.7 启动脚本
- 吴恩达神经网络1-2-2_图神经网络进行药物发现-第2部分
- 借助office web apps实现在线预览和在线编辑
- java ThreadLocal理解和使用
- Linux perf tools
- ------表达式---数值表示/算术运算符
- java 数据输出详解_JAVA之I/O 输入输出流详解
- mariadb配置主从同步遇到的问题
- Windows 7 Ultimate Download (Windows 7 旗舰版下载)
- CodeBlocks 20.03 开发基于FLTK 1.4.X 的应用
- 点云边界提取方法总结
- win10无法连接wifi_更新WIN10 1903遇到旧版高通驱动无法连接WIFI重新安装网卡驱动...
- java验证码不显示_chrome无法显示Java生成的验证码图片
- linux引导文件制作U盘,Linux下制作U盘系统启动盘的方法
- dwcs6 mysql站点_dreamweaver cs6中本地站点的管理方法讲解
- html 九宫格头像,JAVA-仿微信九宫格头像
热门文章
- 5个需要避免的CSS错误
- 我的第三个Android应用软件——《新概念3》
- 【Axure教程】调用b站视频播放器
- jsp连接oracle数据库并实现简单登录功能,来自网络,部分修改。(亚信联创实习)
- 【Python | opencv+PIL】常见操作(创建、添加帧、绘图、读取等)的效率对比及其优化
- 第一篇 javase时钟表
- 第三方网站实现钉钉(DingTalk)扫码登陆(Vue+SpringBoot)
- 书到用时方恨少,收集并不断积累资源【不断更新】
- 安卓学习专栏——实战项目酷欧天气(2)遍历全国省市县数据
- Vue实战电商系统-五商品管理