当前位置: 首页 > news >正文

Axure设计之动态图表——排名图(中继器)

粉丝问我可不可以用中继器做条形图,而且是要做成自动增长的排名图表。所以现在教大家怎么用axure来制作制作排名图。

这个原型制作完成之后,后期有类似的功能,直接拿过去使用也比较简单,基本只需要修改中继器数据就可以了。喜欢、想要该原型的小伙伴或者有很多问题的小朋友都可以在评论给我留言哦。

一、效果演示

1. 自动轮播效果(快速)

2. 自动轮播效果(慢速)

3. 自动轮播效果(慢速且系数固定)

4. 手动切换效果

二、设计思路

考虑到元件应具有强复用性,选择使用中继器制作,后期其他地方使用只需改改数据和样式不用大费周折。

1. 通过中继器控制图表的数据显示,这里命名为中继器A;

2. 由于图表数据是动态的,我想的是再通过一个元件(这里是中继器B)来控制中继器A的数据源;

3. 数据解决了,再来处理数据显示问题。由于事件中无"设置颜色"交互,而我这里数据项又使用了不同的颜色表示,所以数据项得单独设置,在通过中继器A绑定数据;

三、重要步骤

我们可以按照思路从后往前实现:

1. 先画数据项,我这里列表画了10个数据项,分别用不同颜色设置,如下排列:

2. 再拖入一个中继器,命名为中继器B,定义好中继器的列名和数据,作为数据源。注意这里"no=0"第一行的数据作为年份选择下拉框选项数据column1~column10:

3. 再拖入一个中继器,命名为中继器A,定义好中继器的列名(注意:中继器A不用添加数据,他的数据是通过交互根据中继器B中来添加的),作为图表的数据实体:

4. 制作年份下拉选择框,并绑定事件:

5. 设置中继器A的交互"每项加载",绑定数据到各个数据项:

6. 补充:考虑后期可直接作为元件使用,这里没用使用全局变量,而是再页面拖入了两个矩形分别记录变量数据,这里命名为"变量值column"和"变量值coefficient"。变量值column:用来记录选择的年份;变量值coefficient:用来记录计算得到的系数(用作设置条形的尺寸,条形宽度=中继器A列column的数值*系数,系数=条形最大宽度/中继器A列column的最大值)

本期的分享内容到此告一段落,如果大家对这款原型感兴趣或者有疑问,欢迎在评论区留言,如果想直接拿来用,请关注文章头部查看资源下载哦。

原型预览:https://qwqpls.axshare.com

创作不易,感谢您的支持与理解。

  End·往期推荐

大屏可视化:舞动数据与美观的“设计秘籍”

Axure科技感大屏系统设计:智慧农场管理平台

智慧水务:解锁供水行业的未来密码,引领数字化转型新篇章

Axure原型设计秘籍:解锁高效设计与开发的宝藏工具

Axure Web端交互元件库:从Quick UI到700+组件的飞跃

Axure十大常用函数教程 

相关文章:

Axure设计之动态图表——排名图(中继器)

粉丝问我可不可以用中继器做条形图,而且是要做成自动增长的排名图表。所以现在教大家怎么用axure来制作制作排名图。 这个原型制作完成之后,后期有类似的功能,直接拿过去使用也比较简单,基本只需要修改中继器数据就可以了。喜欢、…...

在Java中几种常用数据压缩算法的实现及其优劣势

在Java中几种常用数据压缩算法的实现及其优劣势 背景:项目需要引入Redis作为缓存组件,需要考虑到Redis的内存占用(机器内存越大,成本越高),因此需要引入数据压缩。 1、介绍 数据压缩是计算机领域中一项重要…...

Mac通过Windows App远程访问windows电脑报错0x104的解决办法

1、远程windows电脑,确保打开 远程访问 2、Mac电脑上的配置: 2.1 新版的windows app远程桌面软件相比之前老的Microsoft Remote Desktop,对于mac来说,不会弹出“是否允许该app查找本地网络设备”,需要手动打开 操作步…...

Spring Boot接口返回统一格式

统一的标准数据格式好处 SpringBoot返回统一的标准数据格式主要有以下几点好处: 增强接口的可读性和可维护性,使得前端开发人员能够更加清晰地理解接口返回的数据结构,从而提高开发效率。 降低前后端耦合度,当后端需要修改返回数…...

小程序入门学习(八)之页面事件

一、下拉刷新新事件 1. 什么是下拉刷新 下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。 2. 启用下拉刷新 启用下拉刷新有两种方式: 全局开启下拉刷新:在 app.json 的 window…...

Docker基础【windows环境】

课程内容来自尚硅谷3小时速通Docker教程 1. Docker简介 Docker 通过 Docker Hub 实现一行命令安装应用(镜像)【Nginx,Mysql等】,避免繁琐的部署操作。同时通过轻量级(相对于虚拟机)的容器化的思想&#x…...

【docker】docker compose 和 docker swarm

Docker Compose 和 Docker Swarm 都是 Docker 生态中的工具,但它们有不同的用途和目标。 下面是这两者的主要区别,帮助你理解它们在不同场景中的使用。 1. 用途和目标 Docker Compose: 目标:主要用于在单个机器上定义和运行多个容器应用&a…...

第三部分:进阶概念 7.数组与对象 --[JavaScript 新手村:开启编程之旅的第一步]

第三部分:进阶概念 7.数组与对象 --[JavaScript 新手村:开启编程之旅的第一步] 在 JavaScript 中,数组和对象是两种非常重要的数据结构,它们用于存储和组织数据。尽管它们都属于引用类型(即它们存储的是对数据的引用而…...

LabVIEW密码保护与反编译的安全性分析

在LabVIEW中,密码保护是一种常见的源代码保护手段,但其安全性并不高,尤其是在面对专业反编译工具时。理论上,所有软件的反编译都是可能的,尽管反编译不一定恢复完全的源代码,但足以提取程序的核心功能和算法…...

Docker魔法:用docker run -p轻松开通容器服务大门

前言 “容器”与“虚拟化”作为现代软件开发和运维中的关键概念,已经广泛应用于各个技术领域。然而,在使用 Docker 部署应用时,常常会遇到这样的问题:容器正常运行,却无法让外界访问其内部服务?即使容器内的应用顺利启动,外部无法通过浏览器或 API 进行连接。此时,doc…...

ubuntu防火墙(三)——firewalld使用与讲解

本文是Linux下,用ufw实现端口关闭、流量控制(二) firewalld使用方式 firewalld 是一个动态管理防火墙的工具,主要用于 Linux 系统(包括 Ubuntu 和 CentOS 等)。它提供了一个基于区域(zones)和服务&#x…...

【大数据技术基础 | 实验十一】Hive实验:新建Hive表

文章目录 一、实验目的二、实验要求三、实验原理四、实验环境五、实验内容和步骤(一)启动Hive(二)创建表(三)显示表(四)显示表列(五)更改表(六&am…...

Python实现Excel中数据条显示

Python中要实现百分比数据条的显示,可以使用pandas库,pandas图表样式的设置与Excel中的条件格式设置比较类似,比如Excel里常用的数据条的用法,在pandas中使用代码进行高亮显示,用来突出重点数据,下面一起来…...

矩阵与向量的基本概念

**一、四个基本子空间的定义** 1. **行空间(Row Space)** 行空间是由矩阵的所有行向量所形成的空间。它包含所有可能的行向量的线性组合。行空间的维度称为矩阵的行秩。 2. **零空间(Null Space)** 零空间是与矩阵相乘后结果为零的…...

亚马逊云科技大语言模型加速OCR应用场景发展

目录 前言Amazon Bedrock关于OCR解决方案Amazon Bedrock进行OCR关键信息提取方案注册亚马逊账号API调用环境搭建 总结 前言 大语言模型是一种基于神经网络的自然语言处理技术,它能够学习和预测自然语言文本中的规律和模式,可以理解和生成自然语言的人工…...

十九(GIT2)、token、黑马就业数据平台(页面访问控制(token)、首页统计数据、登录状态失效)、axios请求及响应拦截器、Git远程仓库

1. JWT介绍 JSON Web Token 是目前最为流行的跨域认证解决方案,本质就是一个包含信息的字符串。 如何获取:在使用 JWT 身份验证中,当用户使用其凭据成功登录时,将返回 JSON Web Token(令牌)。 作用&#xf…...

深入探索现代 IT 技术:从云计算到人工智能的全面解析

目录 1. 云计算:重塑 IT 基础设施 2. 大数据:挖掘信息的价值 3. 物联网(IoT):连接物理世界 4. 区块链:重塑信任机制 5. 人工智能(AI):智能未来的驱动力 结语 在当今…...

Redis的持久化

目录 1. 文章前言2. RDB2.1 触发机制2.2 流程说明2.3 RDB文件的处理2.4 RDB的优缺点 3. AOF3.1 使用AOF3.2 命令写入3.3 文件同步3.4 重写机制3.5 启动时数据恢复 4. 持久化总结 1. 文章前言 (1)Redis支持RDB和AOF两种持久化机制,持久化功能…...

小型支付商城系统-MVC工程架构开发

第1-1节 DDD 架构概念 1.DDD 是什么 那 DDD 是什么呢?来自于维基百科的一段定义:"Domain-driven design (DDD) is a major software design approach. ",DDD 是一种软件设计方法。也就是说 DDD 是指导我们做软件工程设计的一种手…...

探索 ONLYOFFICE 8.2 版本:更高效、更安全的云端办公新体验

引言 在当今这个快节奏的时代,信息技术的发展已经深刻改变了我们的工作方式。从传统的纸质文件到电子文档,再到如今的云端协作,每一步技术进步都代表着效率的飞跃。尤其在后疫情时代,远程办公成为常态,如何保持团队之间…...

Spark 计算总销量

Spark 计算总销量 题目: 某电商平台存储了所有商品的销售数据,平台希望能够找到销量最好的前 N 个商品。通过分析销售记录,帮助平台决策哪些商品需要更多的推广资源。 假设你得到了一个商品销售记录的文本文件 product_id, product_name,…...

力扣每日一题 - 3001. 捕获黑皇后需要的最少移动次数

题目 还需要你前往力扣官网查看详细的题目要求 地址 1.现有一个下标从 1 开始的 8 x 8 棋盘,上面有 3 枚棋子。2.给你 6 个整数 a 、b 、c 、d 、e 和 f ,其中:(a, b) 表示白色车的位置。(c, d) 表示白色象的位置。(e, f) 表示黑皇后的位置。…...

【React】React常用开发工具

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、React DevTools二、Redux DevTools三、Create React App 前言 React 是一种用于构建用户界面的流行 JavaScript 库,由于其灵活性、性能和可重用…...

c++ 数据结构:图

图是一种重要的非线性数据结构,用于表示对象及其关系。它广泛应用于社交网络、交通网络、任务调度、导航等领域。 图的基本概念 图的定义: 图由 顶点(Vertex) 和 边(Edge) 组成,记为 G(V,E)&a…...

SpringBoot整合Mockito进行单元测试超全详细教程 JUnit断言 Mockito 单元测试

Mock概念 Mock叫做模拟对象,即用来模拟未被实现的对象可以预先定义这个对象在特定调用时的行为(例如返回值或抛出异常),从而模拟不同的系统状态。 导入Mock依赖 pom文件中引入springboot测试依赖,spring-boot-start…...

十六,Spring Boot 整合 Druid 以及使用 Druid 监控功能

十六,Spring Boot 整合 Druid 以及使用 Druid 监控功能 文章目录 十六,Spring Boot 整合 Druid 以及使用 Druid 监控功能1. Druid 的基本介绍2. 准备工作:3. Druid 监控功能 3.1 Druid 监控功能 —— Web 关联监控3.2 Druid 监控功能 —— …...

Python办公—DataMatrix二维条码制作

目录 专栏导读1、库的介绍2、库的安装3、核心代码4、完整代码总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题,解放您的双手 🏳️‍🌈 博客主页:请点击——> 一晌小贪欢的博客主页求关注 👍 该系列文章专栏:请点击——>Python办公自动化专…...

Linux:软硬链接

目录 一、概念 软链接 硬链接 二、原理 硬链接 软链接 三、使用场景 硬链接 软链接 一、概念 软链接 在当前目录下,有一个普通文件a.txt。 ln -s a.txt a_soft.link结论: 软链接是一个文件。 观察inode_id,发现软链接有着独立…...

[笔记] Windows 上 Git 安装详细教程:从零开始,附带每个选项解析

Git 是目前最流行的分布式版本控制系统之一,广泛应用于软件开发和项目管理中。对于 Windows 用户来说,正确安装和配置 Git 是开始使用 Git 的第一步。本文提供一份详细的指南,帮助你在 Windows 系统上顺利安装 Git,并解释每个安装…...

23种设计模式之策略模式

目录 1. 简介2. 代码2.1 Strategy (策略接口)2.2 AddStrategy (具体策略类)2.3 SubStrategy (具体策略类)2.4 MultiplyStrategy (具体策略类)2.5 Operation (上下文类&am…...

总篇:Python3+Request+Pytest+Allure+Jenkins接口自动化框架设计思路

1、技术选型 Python3 Python 是一种广泛使用的高级编程语言,具有简洁、易读、易维护的特点。 Python 拥有丰富的第三方库,可以方便地进行接口测试的开发。 Request Request 是一个强大的 HTTP 库,用于发送 HTTP 请求和处理响应。 Request 支持多种 HTTP 方法,如 GET、P…...

【QML】release版本bug,信号的参数无法获取

1. 现象 问题 QML程序在debug编译模式下程序可以正常运行,但是release版本下报错:ReferenceError: para is not defined版本 Qt creator 10.0.2Qt_5_15_2_MinGW 平台 win 10 2. 解决方法 暂时没有找到好的解决办法,只能规避规避方法 //问…...

Javaweb 前端 ajax

作用:和后端交互 script 是 js axios(这里是函数的调用方式){封装的是对象} {}是对象 案例 。then的含义,请求后端之后,后端把数据放在回调 点了清空之后,还要查询全部 await等待请求执行完之后,接收这个结果 代码…...

汽车EEA架构:发展历程

1.发展历程的基本逻辑 汽车电子电气的发展历程中,其使用的基本逻辑是IPO(Input-Processing-Output)模型,如下图1所示: 图 1 那什么是IPO模型了?我们从控制器的原理入手解释IPO模型,控制器的主要用途如下: 根据给定的逻…...

几个Linux系统安装体验: 统信服务器系统

本文介绍统信服务器系统(UOS)的安装。 下载 下载地址: https://www.chinauos.com/resource/download-server 本文下载的文件名称为uos-server-20-1070e-amd64.iso。 安装 本次实践仅是做测试体验,因此在pc上使用虚拟机vmware…...

用二维图像渲染3D场景视频

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…...

ChatGPT 最新推出的 Pro 订阅计划,具备哪些能力 ?

OpenAI 最近推出了 ChatGPT Pro,这是一个每月收费 200 美元的高级订阅计划,旨在为用户提供对 OpenAI 最先进模型和功能的高级访问。 以下是 ChatGPT Pro 的主要功能和能力: 高级模型访问: o1 模型:包括 o1 和 o1 Pro…...

如何在 IntelliJ IDEA 中为 Spring Boot 应用实现热部署

文章目录 1. 引言2. 准备工作3. 添加必要的依赖4. 配置 IntelliJ IDEA4.1 启用自动编译4.2 开启热部署策略 5. 测试热部署6. 高级技巧7. 注意事项8. 总结 随着现代开发工具的进步,开发者们越来越重视提高生产力的特性。对于 Java 开发者来说,能够在不重启…...

NLP与LLM的工程化实践与学习思考 - 写在开头

NLP与LLM的工程化实践与学习思考[24年半年工作总结] - 写在开头 0 开头的开头 0 开头的开头 24年因为一些工作原因,短暂在NLP领域遨游了半年。这半年对我的影响蛮大,一来是因为此前从没接触过这个方向学到新东西挺开心的,二来是在工程化实践…...

Redis(一)

Redis 基础 什么是 Redis? Redis (REmote DIctionary Server)是一个基于 C 语言开发的开源 NoSQL 数据库(BSD 许可)。与传统数据库不同的是,Redis 的数据是保存在内存中的(内存数据库&#xf…...

RocketMq源码-broker(五)

一、RocketMq存储设计 RocketMQ 主要存储的文件包括Commitlog 文件、ConsumeQueue 文件、IndexFile。RocketMQ 将所有主题的消息存储在同一文件,确保消息发送时顺序写文件,尽最大的能力确保消息发送的高性能与高吞吐量。 但由于一般的消息中间件是基于消…...

【Linux】文件描述符fd

1.前置预备 文件 内容 属性访问文件之前&#xff0c;都必须先打开他 #include<stdio.h> int main() { FILE* fpfopen("log.txt","w"); if(fpNULL) { perror("fopen"); return 1; } fclose(fp); return 0…...

mysql之事务

MySQL的事务隔离特性指的是多个并发事务之间相互隔离的程度&#xff0c;以保证数据的一致性和并发性。MySQL支持四个隔离级别&#xff0c;分别是读未提交&#xff08;Read Uncommitted&#xff09;、读已提交&#xff08;Read Committed&#xff09;、可重复读&#xff08;Repe…...

python插入mysql数据

# 插入与上一篇变化不大,只是需要进行确认操作. 增加确认操作的方法有两种&#xff08;假设类对象为a&#xff09;: 1.在连接时传入一个参数:autocommitTrue aConnection&#xff08; host"localhost", port3306, user"root", password"自己的密码…...

C语言面试题/笔试题/高频面试题

一、C&#xff1a; 1.static和const的作用优缺点 限制作用域&#xff1a; static声明中使用全局变量、函数 &#xff0c;仅当前文件内可用&#xff0c;其他文件不能引用 static修饰的局部变量只能在本函数中使用. 延长生命周期: static修饰的变量生命周期为整个程序 存放位置&a…...

rust websocket Echo server高性能服务器开发

最近在学习websocket时,一直没有发现好的websocket server工具来调试,于是就自己做了一个websocket server用来学习和调试。因为rust性能遥遥领先,所以就采用了rust来搭建服务器。废话不多说直接上代码main.rs: use tokio::net::TcpListener; use tokio_tungstenite::tung…...

Docker打包SpringBoot项目

一、项目打成jar包 在进行docker打包之前&#xff0c;先确定一下&#xff0c;项目能够正常的打成JAR包&#xff0c;并且启动之后能够正常的访问。这一步看似是可有可无&#xff0c;但是能避免后期的一些无厘头问题。 二、Dockerfile 项目打包成功之后&#xff0c;需要编写Doc…...

ViT学习笔记(二) Patch+Position Embedding阶段的详细推演与理解

我认为讲得最好的一个文章&#xff1a;Vision Transformer详解-CSDN博客 有很多文章&#xff0c;自己并没有完全正确理解。 我的笔记&#xff0c;以ViT的标准应用为例&#xff1a; • 输入图像&#xff1a;输入图像的尺寸是224x224&#xff0c;且是RGB图像&#xff0c;因此输…...

Elasticsearch 单节点安全配置与用户认证

Elasticsearch 单节点安全配置与用户认证 安全扫描时发现了一个高危漏洞&#xff1a;Elasticsearch 未授权访问 。在使用 Elasticsearch 构建搜索引擎或处理大规模数据时&#xff0c;需要启用基本的安全功能来防止未经授权的访问。本文将通过简单的配置步骤&#xff0c;为单节…...

【PHP项目实战】活动报名系统

目录 项目介绍 开发语言 后端 前端 项目截图&#xff08;部分&#xff09; 首页 列表 详情 个人中心 后台管理 项目演示 项目介绍 本项目是一款基于手机浏览器的活动报名系统。它提供了一个方便快捷的活动报名解决方案&#xff0c;无需下载和安装任何APP&#xff0c…...