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,为柱设置渐变色,如下图:

相关推荐
招风的黑耳11 小时前
Axure制作可视化大屏动态滚动列表教程
axure·动态图表·滚动列表
招风的黑耳3 天前
Axure设计之内联框架切换页面、子页面间跳转问题
axure·页面跳转·内联框架
梓贤Vigo3 天前
【Axure高保真原型】输入框插入话题效果
交互·产品经理·axure·原型
招风的黑耳5 天前
智慧城市综合运营管理系统Axure原型
智慧城市·axure
梓贤Vigo16 天前
【Axure教程】增删改饼图
交互·产品经理·axure·原型·教程
梓贤Vigo17 天前
【Axure高保真原型】动态地图路线
交互·产品经理·axure·原型
梓贤Vigo17 天前
【Axure视频教程】手电筒效果
交互·产品经理·axure·原型·教程
招风的黑耳19 天前
Axure复选框组件的深度定制:实现自定义大小、颜色与全选功能
axure·axure元件
招风的黑耳19 天前
基于Axure的动态甘特图设计:实现任务增删改与时间拖拽交互
axure·甘特图
小马哥编程20 天前
【产品经理从0到1】原型及Axure介绍
产品经理·axure·photoshop