axure使用中继器画柱状图

源文件在顶部。

在axure通过读取中继器中的数据来画柱状图,如下图:

1)创建一个中继器,在里面创建两列:1列是柱状图底部的名称、2列是柱的高度,如下图:

2)双击中继器,画一个矩形作为柱(命名为柱),下方添加一个标签作为名称(命名为名称),如下图:

3)将中继器"样式-布局"改为横向,这样所有的列表就横向排列了。

4)现在可以看到每列都显示相同的柱和名称,接下来就需要添加交互,使中继器在载入时,读取中继器内容的内容,为中继器添加第一个交互事件

载入时,设置文本-名称为中继器第一列数据的值,如下图:

这里的值点击fx去选择中继器数据,如下图:

此时就可以看到柱底部的名称按照第一列一一对应了,如下图:

然后为中继器添加第二个交互事件

载入时,设置柱的矩形宽度为target.width,高度为最大高度的一定比例,需要使用公式计算:target.height*(Item.no/1000),如下图:

锚点在底部,如下图:

可以看到所有的柱也根据中继器第二列的数据显示了,如下图:

说明一下这个公式的意义:这里的target.height就是柱默认矩形的高度(这里通过读取target.height而不是用固定值是为了以后矩形的高度变化也能自动适应),Item.no是中继器no一列的数据,1000是最大高度值(对应的是默认矩形的高度),通过公式就可以换算出数据值对应的矩形高度值。

5)为了方便查看,可以在根据中继器的位置添加刻度线,1000数字对应的就是矩形的默认高度。

将中继器的边框粗细设置为0,为柱设置渐变色,如下图:

相关推荐
梓贤Vigo2 天前
【Axure视频教程】拖动和滚动效果
交互·产品经理·axure·原型·教程
探索未知的自己2 天前
Axure RP 9 制作登录页面过程
axure
梓贤Vigo2 天前
【Axure原型分享】字母分类选择器
交互·产品经理·axure·原型·中继器
colin52103 天前
AxureRP11实例-动态面板有垂直滚动默认滚动到底部JH110004
axure·滚动·axurerp11
colin52105 天前
AxureRP11母版-多母版之间交互功能教程JH110003
交互·axure·axure母版·母版交互
spencer_tseng6 天前
Terminal Single Sign-on
axure
colin52106 天前
Axure 本地预览时加载慢的问题分析和处理方法
axure·谷歌字体样式·网页加载慢
colin52107 天前
AxureRP11实例-手机号提交验证交互功能JH110002
axure·axurerp11·手机号验证
colin52108 天前
AxurePR11实例-验证码倒计时交互功能JH110001
交互·axure·验证码产品交互
Autumn_ing10 天前
2026国内外主流设计工具大对比:Axure、墨刀、Figma、Pixso
ui·aigc·axure·figma·墨刀