Axure实现近10年全国各省份GDP动态排名TOP10

招风的黑耳

已于 2025-04-10 22:29:34 修改

阅读量736

点赞数 29

分类专栏： Axure 文章标签： axure 排名图中继器图表动态交互

于 2025-04-10 22:28:46 首次发布

本文链接：https://blog.csdn.net/u010709330/article/details/147129118

版权

Axure 专栏收录该内容

135 篇文章

订阅专栏

今天，我们带大家学习如何使用中继器设计一个各省份GDP动态的排名图，可以看下面效果效果：

效果预览

自动轮播（快速）：图表快速切换显示不同数据排名。

自动轮播（慢速）：图表以较慢速度切换，便于观察数据变化。

自动轮播（慢速且系数固定）：在慢速切换的基础上，条形图的宽度系数保持不变，便于对比数据大小。

手动切换：用户可以通过点击或选择特定选项来手动切换图表数据。

设计思路

中继器A：作为图表的数据展示层，负责动态呈现数据。
中继器B：作为数据源控制器，存储并管理图表所需的数据。
数据项设置：每个数据项单独设置颜色，以区分不同的数据条。
交互逻辑：通过事件交互，将中继器B的数据绑定到中继器A，并控制图表的显示和切换。

详细步骤

绘制数据项：
- 在画布上绘制10个数据项（可根据需要调整数量），并为每个数据项设置不同的颜色。
配置中继器B：
- 拖入一个中继器，命名为“中继器B”。
- 在中继器B中定义列名和数据，如column1至column10，以及一个特殊的no=0行，用于存储年份选择下拉框选项数据（此步骤可根据实际需求调整）。
配置中继器A：
- 拖入另一个中继器，命名为“中继器A”。
- 定义中继器A的列名，但无需添加数据。中继器A的数据将通过交互从中继器B中获取。
制作年份下拉选择框：
- 创建一个下拉选择框，用于选择年份（或其他分类维度）。
- 将下拉选择框的选项与中继器B中的no=0行数据绑定。
设置中继器A的交互：
- 在中继器A的“每项加载”事件中，设置数据绑定逻辑。根据下拉选择框选中的年份（或其他分类维度），从中继器B中获取对应的数据行，并绑定到中继器A的各个数据项上。
- 为了实现条形图的宽度动态调整，可以设置一个系数变量（如“变量值coefficient”），该变量根据中继器A中列的最大值和中继器A列的值来计算。条形图的宽度 = 中继器A列的值 * 系数。
记录变量数据：
- 在页面上拖入两个矩形，分别命名为“变量值column”和“变量值coefficient”，用于记录下拉选择框选中的年份和计算得到的系数。这些变量可以通过文本标签或其他形式展示给用户，以便用户了解当前图表的状态。
实现自动轮播和手动切换：
- 使用Axure的定时器组件或循环逻辑来实现自动轮播效果。
- 为下拉选择框或其他触发元素设置点击事件，以实现手动切换图表数据的功能。