这套方案完全依托Axure原生的矩形、文本框、中继器三类基础元件搭建,所有条形图数据均由中继器渲染驱动,全程无需借助外部插件,就能实现数据动态更新、交互实时响应的效果。

一、核心元件分工
- 矩形元件
作为条形图的可视化主体,通过中继器的"每项加载时"事件动态调整宽度属性,自动匹配对应数据的长度比例;同时可额外配置一个全透明的覆盖矩形,用来承载鼠标移入、点击等交互事件,避免条形图本身的样式变化干扰交互触发。 - 文本框元件
分为三类用途:一是作为纵轴的分类标签(比如示例里的胖胖、花花等名称),二是作为横轴的刻度标注与单位说明,三是作为动态数据提示文本,默认隐藏,触发交互后自动显示当前条形对应的具体数值。 - 中继器元件
是整个动态条形图的"数据中枢",所有分类名称、对应数值、条形样式参数都存储在中继器的数据表中,后续修改图表数据时,仅需要在中继器表格内编辑内容,预览时图表就会自动同步更新,无需手动调整每个元件的尺寸和文本。
二、动态渲染核心逻辑
- 先在中继器内部布局好基础元件:纵向排列分类文本框、条形矩形,提前对齐元件的相对位置,避免渲染后出现布局错位。
- 配置数据映射规则:在中继器"每项加载时"事件中,通过比例公式自动计算条形宽度:
条形宽度 = (当前数据值 / 预设数据最大值) * 图表区域总可用宽度
同时将中继器数据表内的分类名称赋值给对应文本框,完成基础的图表渲染。 - 分组条形图扩展实现:在中继器数据表中新增多组不同维度的数值列(比如语文、数学、外语),在中继器内部横向并列放置对应数量的条形矩形,分别绑定不同维度的数值计算宽度,通过不同填充色区分维度,即可实现多指标并列的分组条形图效果。
三、动态交互效果配置
- 点击"重新加载"按钮时,触发中继器的"重新载入"事件,可搭配随机数函数生成新的数值,让所有条形的长度自动刷新,模拟真实业务场景下的数据动态更新效果。
- 为透明覆盖矩形添加鼠标交互:鼠标移入时自动高亮条形样式,同时在条形旁弹出动态数据文本框展示具体数值;鼠标移出时恢复条形默认样式,隐藏数据提示,大幅提升原型的演示沉浸感。