在Axure中打造专业级柱状图从未如此简单！本文揭秘仅用基础元件实现数据可视化的核心技巧，从矩形高度绑定到坐标轴绘制，手把手教你突破原型设计瓶颈。掌握这套方法论后，你还能轻松扩展TOPN展示、多系列对比等高级功能，让数据展示不再成为产品演示的短板。

本方法实现了柱状图效果，使用的都是Axure中常用的组件，原理是按照设定的数值设置矩形的高度。本文实现的柱状图仅为基础元件，并不包含业务逻辑。您可以根据实际的业务逻辑，在此基础上扩展功能，比如实现TOPN效果或互动效果等。本文仅适用于具有一定Axure使用经验的用户阅读。

Axure版本：11.0

制作步骤为：

绘制柱状图bar -> 绑定柱状图数据 -> 设置X轴和Y轴标签 -> 绘制坐标轴

一、绘制柱状图bar

在页面中添加中继器控件，编辑中继器，在里面添加一个矩形命名为bar，并调整矩形的颜色和尺寸（示例中宽度为40，高度为300），参考设置如下图：

清除中继器绑定的原始数据，然后添加一个新列，命名为barHeight，用来设置柱状图的高度。为barHeight依次填入数值，如下：

退出中继器编辑状态，然后再次选中中继器，设置水平布局，列距30，设置完成后效果如下：

二、绑定柱状图数据

进入中继器编辑状态，添加中继器交互“项目被载入”，动作选择“设置尺寸”，目标选择矩形bar，变形锚点选择左下角，如下图所示：

点击高度后面的添加函数图标，设置高度为中继器中barHeight列的值，如下图所示：

设置完成后效果如下图所示：

此时退出中继器编辑状态后，可以看到柱状图每个柱子的高度已经按照barHeight设置的值显示，效果如下：

三、设置X轴和Y轴标签

新添加一个中继器，分别添加一个标签（命名为xValue），和一条短竖线（作为X轴刻度线），并为中继器添加X轴的刻度数据（此处以月份为例），设置中继器布局方式为水平，列距31（根据实际效果调整），具体设置参考下图：

再新添加一个中继器，分别添加一个标签（命名为yValue），和一条短横线（作为Y轴刻度线），并为中继器添加Y轴的刻度数据，设置中继器布局方式为垂直，行距15（根据实际效果调整），具体设置参考下图：

四、绘制坐标轴

画一条水平线作为X轴，设置线条末端形状为箭头，设置方法如下：

再画一条垂直线，用同样的方法设置末端箭头，然后调整X轴和Y轴到合适的位置，再将X轴标签和Y轴标签移动到合适的位置，完成后效果如下图：

至此，柱状图就设置完成啦，最终预览效果如下：

五、进阶内容

这样实现的柱状图仅有一个系列，如果想要添加多个系列怎么办？

其实方法非常简单，只要将原系列再复制一份，修改bar的颜色和数值，然后再将新系列调整到合适的位置即可，详细的操作方法如下：

将原红色系列复制一份并修改新系列的颜色，完成后效果如下：

调整两个系列中bar的宽度和间距，让整个图表看起来更好看，但要注意两个系列的bar宽度和间距要一致（示例中我只调整了间距为70），调整之后效果图如下：

最后，调整一下X轴的长度，以及X轴刻度和标签所在中继器的列距，让刻度与两个系列的中线对齐即可，最终实现的效果图如下：