Axure中继器动态数据图表制作

在Axure RP中,中继器(Repeater)是一个非常强大的工具,它允许设计者动态地展示和交互数据,进而创建各种复杂的数据可视化图表,如柱状图、条形图、堆叠图、散点图和对比图。以下将详细介绍如何使用中继器来设计这些图表。

1. 中继器柱状图

步骤概述

  1. 创建中继器
    • 在Axure的画布上拖入一个中继器,设置其数据列为两列,一列是"名称"(如产品名称),另一列是"数值"(如销量)。
  2. 设计柱状图元素
    • 双击中继器,内部添加两个元素:一个矩形作为柱状图的柱子,一个文本标签用于显示名称。
    • 设置柱子的样式,如颜色、边框等。
  3. 交互设置
    • 在中继器的"每项加载时"事件中,设置柱子的高度根据"数值"列动态变化,通常使用公式如target.height * (Item.数值 / 最大值)
    • 文本标签的文本值设置为中继器的"名称"列。
  4. 调整布局
    • 将中继器的布局设置为横向,使每个柱子并排显示。

2. 中继器条形图

步骤与柱状图类似,但布局方向相反

  • 将中继器的布局设置为垂直,使条形图从上到下或从下到上排列。
  • 其余步骤与柱状图相同,包括数据列的设置、元素的设计和交互设置。

3. 中继器堆叠图

步骤概述

  1. 数据准备
    • 中继器数据列应包括多个数值列(如不同分类的销量)。
  2. 设计堆叠元素
    • 在中继器内为每种分类设计一个矩形,作为堆叠图的组成部分。
    • 矩形的堆叠顺序和高度应根据数据动态调整。
  3. 交互与计算
    • 使用公式计算每个矩形的累积高度,确保它们正确堆叠。
    • 设置鼠标交互以显示详细数据。

4. 中继器散点图

步骤概述

  1. 数据列设置
    • 中继器数据包括横坐标(如时间)和纵坐标(如数值)。
  2. 设计散点
    • 在中继器内为每个数据点拖入一个圆形或方形作为散点。
    • 设置散点的位置和大小(大小可根据数值调整)。
  3. 交互设置
    • 添加鼠标移入和移出时的交互,如改变散点大小、显示数据标签等。

5. 中继器对比图

对比图通常结合柱状图或条形图使用,强调数据间的差异

  1. 设计基础图表
    • 首先根据需求设计柱状图或条形图。
  2. 数据对比
    • 在中继器中添加额外的列来存储对比数据(如去年销量)。
    • 在图表中为每个数据点添加对比元素(如不同颜色的柱子或线条)。
  3. 视觉强调
    • 使用不同的颜色、阴影或标注来突出显示对比差异。

结论

通过Axure RP的中继器功能,可以灵活地设计并动态展示多种数据可视化图表。无论是柱状图、条形图、堆叠图、散点图还是对比图,都可以通过合理的数据设置、元素设计和交互配置来实现。这些图表不仅有助于数据的直观展示,还能提升用户体验和交互效果。

预览地址: https://1zvcwx.axshare.com

推荐Axure元件库,助力高效设计:

Axure高端交互元件库:助力产品与设计-CSDN博客

ElementUI元件库在Axure中使用-CSDN博客

Axure打造科技感数据可视化大屏原型-CSDN博客

相关推荐
PMEcho11 小时前
墨刀监听变量实战:1个案例搞定高保真交互原型(附教程)
axure·变量·函数·交互设计·墨刀·原型设计·条件判断·高保真原型·监听·高级交互·高保真交互原型
PM大明同学12 天前
Axure PR 9 搜索 百度引擎 设计&交互
交互·axure
昕冉13 天前
Axure9中继器内部实现批量操作
设计模式·axure·设计
昕冉13 天前
Axure9中继器多数据实现分页
设计模式·axure·设计
昕冉13 天前
Axure9中继器实现数据排序
设计模式·axure·设计
半路_出家ren21 天前
第六章网络互联设备
网络·网关·交换机·中继器·集线器·网桥·无线ap
冯浩(grow up)1 个月前
Axure Rp 11 安装、汉化、授权
axure
梓贤Vigo1 个月前
【Axure高保真原型】图片列表添加和删除图片
axure
害羞的白菜1 个月前
基于Axure+墨刀设计的电梯管理系统云台ERP的中保真原型图
数据分析·产品经理·axure·项目经理·墨刀
小赖同学啊1 个月前
Axure 与 Cursor 集成实现方案
axure