【每日教程】用中继器做排名图

简介: 【每日教程】用中继器做排名图

一、效果介绍

640.gif

二、功能介绍

  1. 简单填写中继器内容即可生成排名图,无需连外网。
  2. 样式颜色等可以自由变换。
  3. 鼠标移入时能显示具体数据。

三、制作方法

(1)中继器里有两列,x和no,x为中坐标,no为具体数值如下图所示:

640.png


(2)中继器内材料:文本框+矩形1,如下图所示放置即可:

640.png


(3)在中继器外建一个文本框(命名为最大值)并隐藏,只用于逻辑处理。文本框的值填写no里面最大的值,该案例为920。逻辑是找到最长的矩形的值,让比它短的矩形值调低宽度。具体公式[[LVAR2.width*(Item.no/LVAR1)]]。

LVAR2.width指矩形的宽,LVAR1指no的最大值,Item.no指no的当前值。

(4)具体交互

中继器每项加载时,是设置中继器内的文本框的文字=[[Item.x]]设置矩形的尺寸[[LVAR2.width*(Item.no/LVAR1)]],锚点在左部。

640.png


(5)用矩形和标签制作外框并标上刻度,如下图所示:

640.png


将中继器移动到对应位置上即可。

(6)做一个标签,如下图所示,默认隐藏,透明度75%。

640.png


思路,鼠标移入矩形的时候,显示标签,标签跟随鼠标移动,让Item.no的值=文本标签2,Item.x的值=文本标签1。

鼠标移出的时候,隐藏标签即可。

640.png


这样制作完成了排名图,以后使用方便,仅需简单填写中继器的内容,即可拥有完美的效果,所以强烈推荐给各位使用。


需要原型的小伙伴们可以在评论留言哦,谢谢大家!
作者:梓贤vigo;

微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容

本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

目录
打赏
0
0
0
0
6
分享
相关文章
Axure设计之动态图表——排名图(中继器)
本文介绍了如何使用Axure制作自动增长的排名图表。通过中继器控制数据展示,实现动态更新的条形图。包括自动轮播和手动切换效果,具备高复用性,便于后期调整。示例展示了具体的设计思路和实现步骤,适合初学者学习参考。
CMplot & rMVP | 全基因组曼哈顿图和QQ图轻松可视化!
`CMplot`和`rMVP`是R语言中的两个包,用于全基因组关联分析(GWAS)的数据可视化。`CMplot`专注于曼哈顿图和QQ图的绘制,支持多种图表类型,如常见的SNP密度图、环状曼哈顿图、矩阵图、单条染色体图和多重曼哈顿图等。`rMVP`不仅包含了`CMplot`的功能,还支持更复杂的GWAS方法,如线性/混合线性模型和基因组选择算法,优化了内存管理和计算效率,特别适合大规模数据集。此外,它还提供PCA图和柱状图。两者都提供了丰富的参数定制图表。
555 1
CMplot & rMVP | 全基因组曼哈顿图和QQ图轻松可视化!
你以为键入网址后只是等待吗?惊!原来网页显示背后隐藏着这些奇妙步骤(上)
当我们键入一个网址后,从键入网址到网页显示之间会发生许多复杂的步骤。这篇文章旨在详细解释这一过程,帮助读者深入了解HTTP、DNS和协议栈等相关知识。通过这篇文章,读者可以消除疑惑,也可巩固对网络通信的理解,从而更好地应用和利用互联网。
121 6
你以为键入网址后只是等待吗?惊!原来网页显示背后隐藏着这些奇妙步骤(上)
你以为键入网址后只是等待吗?惊!原来网页显示背后隐藏着这些奇妙步骤(中)
通过对TCP/IP协议的深入研究,我们可以更好地理解网络通信的整个过程,以及各个协议在其中的作用。这对于我们理解和解决网络通信中的问题非常重要。希望通过本文的学习,能够对TCP/IP协议有更深入的了解,并能够应用到实际的网络通信中。
104 2
你以为键入网址后只是等待吗?惊!原来网页显示背后隐藏着这些奇妙步骤(中)
【算法入门&搜索法】走迷宫|单源最短路径1
【算法入门&搜索法】走迷宫|单源最短路径1
238 0
网站导航应该这样设计才正确,你应该知道的十个关键点
网站导航的细节设计左右着使用者体验好坏,不管你的网站页面设计得再漂亮,使用者体验不在,自然也留不住浏览者的注意力。从你的网站视觉吸引力、布局,再到文本的运用都是使用者体验的一环,要达到美观与功能之间的平衡,才称得上是一个好网站。
524 0
网站导航应该这样设计才正确,你应该知道的十个关键点
L2-036 网红点打卡攻略 (25 分)(图论)
L2-036 网红点打卡攻略 (25 分)(图论)
262 0
「干货」面试官问我如何快速搜索10万个矩形?——我说RBush
前言 亲爱的coder们,我又来了,一个喜欢图形的程序员👩‍💻,前几篇文章一直都在教大家怎么画地图、画折线图、画烟花🎆,难道图形就是这样嘛,当然不是,一个很简单的问题, 如果我在canvas中画了10万个点,鼠标在画布上移动,靠近哪一个点,哪一个点高亮。有同学就说遇事不决 用for循环遍历哇,我也知道可以用循环解决哇,循环解决几百个点可以,如果是几万甚至几百万个点你还循环,你想让用户等死?这时就引入今天的主角他来了就是「Rbush」 rbush 我们先看下定义,这个rbush到底能帮我们解决了什么问题? RBush是一个high-performanceJavaScript库,用于点和
「干货」面试官问我如何快速搜索10万个矩形?——我说RBush