每日快报!Axure高保真教程:通过输入框动态维护可视化图表
与静态图相比,动态图更能够吸引他人注意,更好地呈现所需要表达的内容。本文介绍了动态图表在数据可视化中的作用,并以柱状图为例,分享了通过输入框控制调用外部的js图表的制作教程,希望对你有所帮助。
与静态图表相比,动态图表更能吸引观众的眼球并提供更好的视觉效果。动态元素可以吸引观众的注意力,使数据更生动、更具交互性。
这有助于提高信息传达的效果,并能够引起观众的兴趣和参与。所以今天作者就教大家,如果通过输入框元件,动态维护可视化图表里的数据,实现图表跟随数据变化而变化的效果。
(资料图片仅供参考)
下面我们会以柱状图为案例:
一、效果展示
可以在输入框里修改项目名或数据,修改后自动生成对应的柱状图。可以在输入框里增加或删除数据,自动生成对应的柱状图。可以通过复制粘贴的方式,批量添加新的数据,自动生成对应的柱状图。原型预览地址:https://9ancyh.axshare.com/#g=1
二、制作教程
像案例中的柱状图,我们主要有两种方法制作:一种是用Axure原生元件制作的,另外一种是通过调用外部js图表来制作的。
前者的好处是通过原生元件制作,无需联网,而且后续交互都可以自由添加,缺点是首次制作时间较长;
后者的好处是,通过调用代码来实现,基本复制粘贴就可以搞定;缺点是后续如果要制作交互会比较麻烦,需要联网或者js本地化,自身也需要懂一点点代码。
那今天我就教大家用输入框控制调用外部的js图表,用Axure原生元件制作的以前的教程也有分享过,有需要的同学可以查看历史文章。
1、Axure调用echarts图表的原理讲解我们在Axure里面调用echarts的基础图表,只需在echarts里面找到你需要的图表,这里是基础的图表,那些什么3D的这里不适用。
然后点击下载示例按钮,就可以下载这个图表的html代码。
如下图所示:
我们也可以在红色框那里填写好具体的数据或样式,调整好之后在下载就会得到html文件。那这个文件怎么应用在axure里面呢?
这里有很多种方法,之前在调用echarts图表的教程里也有详细介绍,这里就简单的说明一下:
通过内联框架,里面填写这个html文件的本地地址,但是因为axure预览是不能打开本地文件的,所以我们要生成html文件之后才能看到,如果需要在预览就看到,就需要用地址转换工具才行。将html文件放在服务器或者云存储的环境,生成一个在线的地址,这样就可以通过内联框架直接打开对应的地址从而看到图片了。我们将html文件转为txt,就可以看到里面的html代码,通过js调用的方式,或者将html转成js代码,将图表通过指定元件或者内联框架来实现。如果前两种的话,代码在文件里面,就很难实现输入框控制图表数据了;如果用第三种方法,代码在axure里面,就可以通过修改代码里数据的值,从而控制生成对应的图表。
2. 代码的拆解以echarts柱状图为例,以下是控制图表的基础代码:
可以看到xAxis里的data是控制柱状图的项目,格式为’1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’,yAxis里的data是控制柱状图数值,格式为1234, 2468, 3579, 5678, 6666, 3333 。
3. 输入框里文本的变换我们在看一下输入框里的文本,如下图所示:
所以我们就要将冒号左变的项目值的格式转变成’1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’;冒号右边的的数据格式转变成1234, 2468, 3579, 5678, 6666, 3333
这里我们就要对文本进行处理。首先我们要取第一行出来变成如下图的形式:
这里我们主要用到两个函数,indexof函数和slice函数。我们通过indexof函数,可以找到第一行的换行的位置,然后用slice函数可以将他提取出来,分别设置到两个文本里。
然后我们就要对提取出来的文本1月:1234进行处理了,这里我们也是用indexof和slice函数,indexof函数可以找到冒号的位置,然后用slice函数分别提取处冒号前的项目值,以及冒号后的数据值。
然后我们新建两个文本分别保存两个值,文本默认为空,增加文本为它原来的值增加上新的值。这里需要注意:项目值的格式’text’,需要用引文引号包围,并且用引文逗号分隔; 数据值的格式只需要用英文逗号分隔即可。
这样处理完第一行之后,我们接着处理第二行、第三行数据,这里我们只需要做一个循环即可,判断它里面的还有没有内容行,如果有内容,我们就继续上面的循环;如果没有内容了,我们就可以可以结束循环,触发调用js图表,这样就可以调用图表了。
三、交互什么时候执行
最后,我们什么时候触发这个交互呢?一般我们在输入框失去焦点的时候,但是一般默认图表里会有基础数据,所以我们在载入时就要开始执行了。
我们要先将xy的记录文本先设置为空,因为这是开始前,后面都是在他们原来文本的基础上增加值。如果不清空,在后面修改值的时候,前面的就不会重置,变成越来越多数据了。
然后我们考虑到有些人会打英文冒号,有些人会打中文冒号,所以我们用replace函数统一将中文冒号转为英文冒号。
然后我们触发上面文本转换即可。
然后如果修改了数据,我们也要触发这个交互。我们以输入框失去焦点时,作为修改完成的依据,这里不需要重新写一遍事件,因为前面载入时已经写好了,我们只需要用触发交互,触发输入框载入时即可。
这样我们就制作完成了通过输入框动态维护可视化图表的原型模板了,下次使用时,只需要复制粘贴,修改输入框里的选项文字,即可自动生成柱状图的效果了,是不是很方便呢?
当然,后续你们也可以根据需要,增加一些常用图表,例如条形图、饼图、环形图等,都是一样的方法哦。
那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。
本文由 @AI产品人 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自 Unsplash,基于 CC0 协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
标签:
相关推荐:
最新新闻:
- 秀英区举行小区配套幼儿园集体移交签约仪式
- 世界焦点!佛山南海区里水居民怎么接种流感疫苗?附预约方式
- 每日快报!Axure高保真教程:通过输入框动态维护可视化图表
- 拉菲尼亚:我将在下个赛季留在巴萨 欧冠是我们的目标
- 环球聚焦:潘安湖湿地公园分布图_潘安湖湿地公园
- 韩国年轻人迷上中国App无法自拔:实在太好用了_天天讯息
- 【世界新视野】2023年国家图书馆端午节开馆安排一览
- 每日动态!5年磨一剑 《魔戒:咕噜》开发时间长达5年
- 下关九小“花旦”“金花”同台竞技|全球即时看
- 【全球快播报】董仲舒新儒学思想主张(董仲舒新儒学思想)
- 《猫和老鼠》手游四大平台主播招募活动开启!千元奖励快来带回家!
- 当前时讯:《FF16》巧妙致敬《FF10》 克莱夫和尤娜的哨声一样
- 长实集团:耗资约2738万港元回购61.3万股|快资讯
- 高考出分前的“关键14天”:志愿填报选择权增加,生涯规划既突然又迫切 世界今亮点
- 全球快资讯丨2023粤港澳车展:魏牌新摩卡DHT-PHEV亮相,外观内饰创新升级
- 世界今热点:中央气象台6月16日18时发布暴雨蓝色预警
- 环球快消息!预警!岳阳市局地可能发生山洪灾害
- 毒品犯罪有哪些特征?
- 上海博物馆预约人可以换吗_上海博物馆预约
- 福景外国语学校高中部学费_福景外国语学校-头条焦点
- 长沙2022年GDP:名列前茅-今日报
- 拔丝苹果不用淀粉_拔丝苹果不加淀粉做法-全球报道
- 全球消息!英特尔也要来Ultra?新命名傻傻分不清楚
- 苏宁易购发布618下沉市场消费大数据:郑州郑庵镇成为最强消费小镇
- 世界快报:成都大运会首批门票开售时间 成都大运会首批门票多少钱
- 【全球独家】深圳手足口病风险等级连续两周为中风险 接种疫苗可有效降低重症
- 父母打孩子有什么后果 父母打孩子的后果_每日速讯
- 天天快消息!美媒:拜登对消除乌克兰加入北约的障碍“持开放态度”
- 派对合作游戏《胡闹搬家2》全新无障碍设计与辅助模式介绍
- 豫章师范学院2023年招生简章|天天微动态
- 每日聚焦:我想看李雷与韩梅梅(李雷和韩梅梅:梦想永不散场)
- 比5G强10倍 苹果预估6G商用化将在2029年落地 全球热文
- 【天天快播报】迎接亚运百日倒计时,浙江电信携手中兴通讯多维创新打造亚运场馆极致5G网络体验
- 制香囊,迎端午!郑州市二七区大学路第二小学开展端午主题活动 实时焦点
- 办理信用卡哪个银行容易通过 容易通过的银行盘点
- 正版授权 腾讯手游《阿凡达重返潘多拉》测试将开启
- 当前速看:《最后生还者》主题鬼屋要来了!感受循声者的压迫
- 南微医学:股东拟减持不超3%股份
- 满口香煲仔饭(满口香煲仔饭加盟店_环球视讯
- 兼职模特要注意的骗局_兼职模特怎么才不被骗|环球新动态
- 瓦努阿图政府代表团CIIP官方见面会 将于6月19日在成都举行
- 中国首艘全新智能浮式生产储卸油装置成功交付 看热讯
- 三星Galaxy Z Fold 5渲染图泄露:可完全折叠不留缝-全球最新
- 焦点日报:张家口桥西区开展美丽乡村研学活动
- 环球热消息:适合做手机铃声的英文歌清新脱俗_适合做手机铃声的英文歌
- 财政部:1-5月证券交易印花税收入891亿元 同比下降36.9%
- 心意之礼 致敬父爱 尼康诚意佳作献礼父亲节
- 12+512GB 轻薄本仅 1499 元,15 秒开机
- 世界百事通!即日起杭州消费者每天至高可领830元消费券 京东618买手机省钱又省心
- 全球视点!极狐森林版阿尔法 S 和阿尔法 T 上市,18.58 万起售
- 33个重点项目落户上海普陀 涵盖科技金融、AI技术等领域
- 认证快手商家号需要费用吗?开店有哪些费用?|天天观热点
- 银行板块跌0.49% 招商银行涨0.62%居首 世界球精选
- 盈方微:公司目前没有为腾讯游戏提供芯片 当前热门
- 最新规划公示!青银高速以东地块周边将新建三条道路
- PTA期货每日行情表--郑州商品交易所(6.16)_焦点速读
- 著名的意大利记者丹尼尔-隆戈报道称:国际米兰前锋...
- Dynabook推出Portégé X30L-K笔记本电脑:支持高度定制硬件配置 天天简讯
- 网络游戏板块涨1.31% 昆仑万维涨11.64%居首
- 小岛晒同尼古拉斯凯奇合照 网友猜或加入《死搁2》?
- 外媒称神鬼寓言4女主样貌争议没必要 还得靠质量说话 每日视点
- 《地铁跑酷》开发商倒闭关门 游戏下载量超10亿次
- 《封神第一部》新特辑和剧照 再现封神名场面 环球快资讯
- 【全球快播报】俄外交部警告:西方国家欲通过数字独裁实现全球霸权
- 《动物迷城》新试玩版即将上线,扮演动物囚犯逃出牢笼!
- 山乡吹来艺术风(千万工程 一线探访)
- 爆发性心肌炎病因图片_爆发性心肌炎病因-环球报资讯
- 泡茶流程高清图片_泡茶流程|天天资讯
- 美光公司在华销售产品有哪些_人造草坪有哪些技术参数
- 全球热门:理不胜数原文_理不胜数
- 全球动态:西延高铁马坊隧道及北村隧道相继贯通
- 【环球新视野】俏妃中医馆获评“示范中医医疗机构”
- 2023年浙江高考录取时间安排 具体录取时间
- 热评丨亚运百天倒计时 期待健儿弄潮来_环球滚动
- 环球快资讯:有一个人 他一直陪着我_对于有一个人 他一直陪着我简单介绍