【Axure教程】通过输入框动态维护可视化图表

news2024/11/8 20:00:07

与静态图表相比,动态图表更能吸引观众的眼球并提供更好的视觉效果。动态元素可以吸引观众的注意力,使数据更生动、更具交互性。这有助于提高信息传达的效果,并能够引起观众的兴趣和参与。所以今天作者就教大家,如果通过输入框元件,动态维护可视化图表里的数据,实现图表跟随数据变化而变化的效果。下面我们会以柱状图为案例:

一、效果展示

1、可以在输入框里修改项目名或数据,修改后自动生成对应的柱状图

2、可以在输入框里增加或删除数据,自动生成对应的柱状图

3、可以通过复制粘贴的方式,批量添加新的数据,自动生成对应的柱状图。

【原型预览及下载地址】

https://axhub.im/ax9/9a27399d9b2d17a5/#g=1&p=js单柱状图-输入框维护数据效果

二、制作教程

像案例中的柱状图,我们主要有两种方法制作,一种是用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图表,这样就可以调用图表了

4、交互什么时候执行

最后,我们什么时候触发这个交互呢,一般我们在输入框失去焦点的时候,但是一般默认图表里会有基础数据,所以我们在载入时就要开始执行了。

我们要先将xy的记录文本先设置为空,因为这是开始前,后面都是在他们原来文本的基础上增加值,如果不清空,在后面修改值的时候,前面的就不会重置,变成越来越多数据了。

然后我们考虑到有些人会打英文冒号,有些人会打中文冒号,所以我们用replace函数统一将中文冒号转为英文冒号。

然后我们触发上面文本转换即可

然后如果修改了数据,我们也要触发这个交互,我们以输入框失去焦点时,作为修改完成的依据,这里不需要重新写一遍事件,因为前面载入时已经写好了,我们只需要用触发交互,触发输入框载入时即可。

这样我们就制作完成了通过输入框动态维护可视化图表的原型模板了,下次使用时,只需要复制粘贴,修改输入框里的选项文字,即可自动生成柱状图的效果了,是不是很方便呢?当然,后续你们也可以根据需要,增加一些常用图表,例如条形图、饼图、环形图等,都是一样的方法哦。

那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/624326.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[NOIP2003 提高组] 加分二叉树

[NOIP2003 提高组] 加分二叉树 题目描述: 设一个 n 个节点的二叉树 tree 的中序遍历为(1,2,3,…,n),其中数字 1,2,3,…,n 为节点编号。每个节点都有一个分数(均为正整数),记第 i 个节点的分数为 di​,tree 及它的每个…

优雅草蜻蜓T系统·专业版服务端以及后台部署说明-完整步骤-语音会议室支持多人语音,屏幕分享,导航配置,会议管理,会员管理

蜻蜓T系统专业版服务端以及后台部署 1,解压文件和基础环境配置 将源码用git工具克隆到/www/wwwroot git clone git地址 或者是由优雅草发送的商业源码文件包直接进行解压 ​ 编辑切换为居中 添加图片注释,不超过 140 字(可选)…

十分钟柔和护理,轻松舒缓眼疲劳,云康宝眼部按摩仪体验

平时工作、生活中,每天都要长时间对着手机、电脑等电子设备,像是被它们吸走了灵魂,有时候眼睛干干的、痛痛的,像是被沙子刮过,光靠眼药水之类的东西根本解决不了问题,所以趁着618我入手了一款眼部按摩仪&am…

数字系统。网络层。IPv4 子网划分。ICMP

嘿,伙计们!我希望你们一切都好。作为我每周更新计算机网络的一部分,我想分享一些令人兴奋的话题。 首先,我们深入研究了数字系统的世界。本主题重点介绍二进制和IPv4地址,我们学习了如何将二进制转换为十进制&#xf…

Zookeeper部署

Zookeeper的安装 环境变量的配置 上传安装包 使用MobaXterm、FinalShell或者使用scp将安装包apache-zookeeper-3.6.3-bin.tar.gz上传到/root/softwares下 复制代码 解压安装 [rootqianfeng01 ~]# tar -zxvf apache-zookeeper-3.6.3-bin.tar.gz -C /usr/local 复制代码 更名 …

1091 Acute Stroke (PAT甲级)

这道题用dfs做的话,因为递归太多层,堆栈溢出,有两个测试点过不了;所以用bfs。 但令我百思不得其解的是,我没用方向变量x[6], y[6], z[6],直接老老实实算每一个方向的话,最后一个测试点过不了&a…

17.6:迪瑞克斯啦算法

迪瑞克斯啦算法 这个算法研究的是:有向的,没有负权重,可以有环的图。 这个算法主要研究的是:给出的节点到这张图的其他节点的最短路径是多少。用一个表表示出来。 思路: 如下图所示,我们想要求出a节点到其…

建立时间、保持时间和亚稳态

目录 一、建立时间和保持时间 二、亚稳态 三、避免亚稳态策略 四、多级寄存器阻断亚稳态传播 一、建立时间和保持时间 如图1所示,建立时间(set up time)是指在触发器的时钟信号上升沿到来以前,数据稳定不变的时间,…

【Apache Pinot】探究 Pinot 中存储模型的设计逻辑和 Segment 详解

背景 上一篇文章中,笔者简单介绍了一下分布式数据库 Pinot 的核心组件,本文主要针对其中的存储模型会做部分讲解。 如果你对读写磁盘有不错的基础的话,看起来会更轻松一些,如果没有也没关系,我会简单讲解一下这么设计…

使用STM32进行串口实验(非中断+中断)

关于串口相关的基本知识可以看这篇文章https://blog.csdn.net/weixin_62599865/article/details/129963991?spm1001.2014.3001.5501 一.使用非中断的方式进行串口通信 串口发送/接收函数: HAL_UART_Transmit(); 串口发送数据,使用超时管理机制 HAL_…

2023最新版本Activiti7系列-Activiti7概述和入门案例

一、Activiti7概述 官网地址:https://www.activiti.org/ Activiti由Alfresco软件开发,目前最高版本Activiti 7。是BPMN的一个基于java的软件实现,不过Activiti 不仅仅包括BPMN,还有DMN决策表和CMMN Case管理引擎,并且有…

【前端 - HTML】第 1 课 - HTML 初体验

欢迎来到博主 Apeiron 的博客,祝您旅程愉快 。 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、HTML 概念 2.1、HTML 定义 2.2、标签语法 3、HTML 基本骨架 4、标签的关系 5、注释 6、总结 1、缘起 最近在学习微信小程…

Apache Doris 冷热分层技术如何实现存储成本降低 70%?

在数据分析的实际场景中,冷热数据往往面临着不同的查询频次及响应速度要求。例如在电商订单场景中,用户经常访问近 6 个月的订单,时间较久远的订单访问次数非常少;在行为分析场景中,需支持近期流量数据的高频查询且时效…

C++ 使用一维数组和二维数组给 std::vector<cv::Point2d> 赋值的方法

文章目录 1. 一维数组给 vector 赋值的方法2. 一维 Point2d 数组给 vector<cv::Point2d> 赋值3. 二维 double 数组给 vector<cv::Point2d> 赋值 1. 一维数组给 vector 赋值的方法 &#xff08;1&#xff09;最简单的赋值方法是for循环遍历赋值&#xff0c;此处略过…

Python展开嵌套列表的五种方法

一、问题的提出 微信群中有人问&#xff0c;如何把以下内容转换成一个列表&#xff1a; 转换后&#xff1a; "[["007674","工银产业升级股票A","GYCYSJGPA","1.3574"],["007675","工银产业升级股票C",&qu…

d2l学习_第二章预备知识

x.1 Data Manipulation 数据操作。在Pytorch中常用的数据操作如下&#xff1a; 对于张量&#xff0c;即torch.Tensor类型的数据&#xff0c;你的任何操作都要把他想象成一个指针&#xff0c;因为等于运算符ab&#xff0c;会将b的张量内存地址赋值给a。 torch.Tensor类型的基…

day02-JavaScript-Vue

1 JavaScript html完成了架子&#xff0c;css做了美化&#xff0c;但是网页是死的&#xff0c;我们需要给他注入灵魂&#xff0c;所以接下来我们需要学习JavaScript&#xff0c;这门语言会让我们的页面能够和用户进行交互。 1.5.1.3 JSON对象 自定义对象 在 JavaScript 中自…

linux(信号发送后)

目录&#xff1a; 1.引入什么是合适的时候 2.内核态和用户态 3.信号的处理 4.sigaction函数 -------------------------------------------------------------------------------------------------------------------------------- 1.引入什么是合适的时候 2.信号什么时候被处…

你真的会PPT配色吗?来看看这篇吧,瞬间让你的PPT高大上起来

本文档使用技巧如下截图 在色彩里使用其它填充颜色 选取这个“吸管” 用于吸别人的颜色 我曾经为了出一个“惊艳”的PPT,光吸管用了不下150次。 好的艺术家复制,伟大的艺术家偷窃!--毕加索 下面就给出几大常用配色 各位在使用时注意看这些“色卡”的规律,那就是反差色…

安卓系统浏览器开发

预置某个浏览器为系统默认的浏览器 描述: 当系统存在多个浏览器时&#xff0c;如何预置某个浏览器为系统默认的浏览器&#xff1f; 方法: 1.在PackageManagerService.java中的构造函数结尾添加&#xff1a;setDefaultBrowser(); 2.setDefaultBrowser()的具体实现&#xff…