在做数据可视化原型的时候很多人的第一反应都是去下载一个Echarts元件库或者直接嵌入HTML代码。但如果你在的团队对原型文件有严格的管理要求或者客户需要你交付一个可以直接编辑的rp源文件那么我强烈建议你试试用Axure 9.0的原生组件来画柱状图。什么叫做原生组件就是不引入任何外部插件库只靠Axure自带的矩形、文本标签、中继器、动态面板这些基础元件来完成整个图表。这样做出来的柱状图不仅体积小、加载快而且数据可以随时改动、柱子高度自动刷新交互事件可以任意绑定完全不会有“插件一更新图表就崩”的隐患。这篇文章就围绕“Axure 9.0原生组件绘制柱状图”展开我会从整体设计思路、柱子的数据绑定、坐标轴与标签处理、交互体验扩展再到常见问题的排查完整走一遍我实际项目里的操作流程。无论你是刚接触Axure的产品新人还是准备把原型做得更精细的资深设计师这篇内容都能给你一套可直接复用的方案。1. 整体设计思路用原生组件替代外部图表库1.1 为什么放弃Echarts组件改用原生组件先做一个简单的对比。Echarts这类插件确实强大折线图、柱状图、饼图一个都不少拖进来填数据就能用。但等到你真正落到项目交付环节会遇到几个非常头疼的问题第一插件元件的内部结构是封装好的客户希望调整柱子的颜色、间距、圆角你只能进入“编辑元件”内部去翻结构极其复杂第二插件升级之后原先的图表可能出现样式错乱而且Axure版本一旦升级第三方元件库的兼容性并不总是跟得上第三插件图表的数据大多写在内部数据集里不能直观对应到页面的字段调试时需要反复打开层级面板效率非常低。用原生组件就不一样了。柱子就是一个矩形高度直接绑定数据坐标轴就是线段和文本标签的组合网格线就是几个等距排列的细长矩形。整个图表的任何一部分都可以在页面上直接选中、修改、加交互事件逻辑一目了然。尤其在原型评审的时候开发同事问“这个柱子高度是怎么算的”你直接打开中继器的列数据指给他们看比从插件内部一层层拆快得多。1.2 柱状图的核心组成拆解如果要把柱状图映射到Axure原生组件第一步是弄明白柱状图到底由哪些可见元素构成。拿最常见的横向分类、纵向数值柱状图来说无非是四部分坐标轴、柱子、标签、刻度网格。坐标轴分为横轴分类轴和纵轴数值轴横轴下方通常有类别名称纵轴左侧有数值刻度。柱子的高度代表数据大小柱子的宽度决定视觉比例。标签分为两种一种是横轴上的分类名另一种是柱子顶部的数值显示。刻度网格则是方便读数的水平线通常从纵轴刻度延伸出来。这些元素映射到Axure原生组件里其实非常直接柱子用矩形分类名用文本标签数值标签用文本框坐标轴线用线段或细长矩形刻度网格用水平线条或等高的矩形线框。如果你再往深处想一步柱状图的本质是“高度与数值成正比的一排矩形”那么只要让矩形的高度可以由数据驱动这个柱状图就已经完成一半了。1.3 用中继器作为数据驱动的核心实现数据驱动高度变化是原生组件方案里最出彩的地方。Axure 9.0的中继器Repeater提供了数据集的功能每一行数据都可以作为一条记录而中继器内部的元件可以通过表达式[[Item.列名]]来引用当前行的数据。换句话说只要你在中继器内部放一个矩形并把它的高度设置为[[Item.value]]那么中继器加载多少行数据页面就会自动生成多少根柱子而且每根柱子的高度都是对应行的数值。中继器还有个很实用的特性就是在“新增行”“删除行”“更新行”“重新加载”之后内部绑定表达式的元件会自动重新计算。这意味着你的柱状图天然就具备“数据变化即图表刷新”的能力不需要任何额外的触发逻辑。这也是我选择中继器而不是手动复制矩形的最核心原因。2. 柱子绘制与数据绑定从静态到动态2.1 先用一个静态样板柱确定视觉风格不要一上来就钻进中继器。我的习惯是先做一个静态的“样板柱”把视觉风格敲定再套进中继器里批量复制。这样做的原因是中继器内部的元件一旦绑定表达式调试样式的复杂度会成倍上升不如先在外部把颜色、圆角、阴影、宽度这些参数都调整好进中继器时只需要专注数据绑定。实际操作时我拖入一个矩形宽度设为48px高度设为200px填充色选择蓝色圆角设为2px让柱子的顶部稍微带一点弧线视觉上会更现代。如果你的原型面向的是企业级大屏风格可以把圆角调大甚至加上渐变填充。Axure 9.0的矩形样式里自带渐变设置不需要借助外部插件。做好一个样板柱后我通常还会复制一份放在旁边作为后续数据处理时的参照物。2.2 中继器数据驱动的完整配置步骤首先从库中拖入一个中继器选中后右侧面板会出现“样式”和“数据”相关的配置区域。我建议先把中继器的“布局”设置为水平方向因为柱状图是横向排列的。然后打开中继器的数据集默认会有三列直接修改列名和示例数据即可。我通常只用两列一列叫name存放分类名称一列叫value存放数值。示例数据可以先填几个测试数字比如120、360、540、780、960。接下来双击中继器进入内部页面在里面放置两个元件一个矩形用于显示柱子一个文本标签用于显示分类名。选中矩形打开“交互”面板里的“尺寸”绑定把宽度的固定值保留例如48px高度选择“表达式”填入[[Item.value]]。这样矩形高度就与中继器每条数据的value绑定上了。分类名的文本标签则放在矩形正下方文本内容绑定[[Item.name]]。回到主页面中继器加载时会根据数据行数自动生成对应的柱子。这时候选中整个中继器调整它的位置到画布左侧合适区域同时在下方的样式面板里把“项目间距”设为合适数值。间距决定了柱子之间的空隙我一般设为16px也就是柱子之间空出约三分之一柱宽的间隙视觉上比较舒服。2.3 柱高换算与画布尺寸的计算逻辑直接把value当作高度有个明显问题如果数据是960那矩形就有960px高远超画布范围。所以必须做数值换算。假设我们约定图表绘图区的高度是400pxY轴刻度从0到1000那么柱子高度的换算公式就是显示高度 数据值 / 1000 * 400。在Axure的表达式里实现这个换算可以直接写[[Item.value / 1000 * 400]]。但这么写不够灵活如果需求方改了口径把所有数据翻了一倍你就要把整个中继器里的表达式全改一遍。更稳妥的做法是把最大刻度值单独用一个全局变量或者中继器的一列字段存起来表达式写成[[Item.value / MaxValue * 400]]。这样后续只需修改最大刻度对应的数据所有柱子的高度都会同步调整。还有一个小细节表达式里除法得到的结果可能是小数Axure会保留浮点数。视觉上不会有影响但如果你后续要把柱高显示在某个标签里建议用Math.round()把结果取整。公式可以写成[[Math.round(Item.value / MaxValue * 400)]]表达式编辑框里直接支持JavaScript Math对象。3. 坐标轴、刻度与标签的细节处理3.1 横轴分类标签的居中与对齐中继器内部放置的文本标签默认是跟随中继器项目排列的如果只设置文本水平居中它会在柱子矩形范围内居中。要让分类名准确落在柱子正下方需要把文本标签放在矩形底部外侧同时让整个文本宽度大于矩形宽度才能实现“视觉上的居中”。我的做法是把文本标签宽度设为80px而柱子矩形宽度是48px两者在内部页面里水平居中对齐。这样当多条数据横向排列时每个分类名都会均匀地分布在对应柱子下方。如果文本标签的宽度小于柱子宽度文字会产生偏移看起来像贴着柱子的边缘。还要顺手把文本标签的“垂直对齐”改为“顶部对齐”保证文字紧贴柱子下边缘不会悬空太多。3.2 纵轴刻度与网格线的绘制技巧纵轴刻度通常放在整个图表的最左侧网格线则横跨整个绘图区。Axure里绘制网格线最直接的方式是使用水平线段但线段在缩放和定位上不如细长矩形方便。我建议拉一条宽度等于图表区域宽度的矩形高度设为1px填充色选择浅灰色然后通过“复制多个”的方式生成多条等间距网格线。具体操作是先确定Y轴显示范围和刻度间距。比如最大数值1000刻度间距200那么需要5条网格线对应200、400、600、800、1000。在页面里先放一条代表1000的网格线到图表顶部然后按住Ctrl向下拖动复制依次放到对应位置。为了让间距精确你可以利用“对齐”面板设置等距分布。网格线放好后在最左侧添加数字标签值分别填200、400、600、800、1000与网格线在同一个水平位置对齐。这样做出来的纵轴是完全静态的。如果你希望刻度随数据最大值动态变化那就要把最大刻度也放到中继器的数据行里做动态计算复杂度会提高不少。对于大部分业务原型静态刻度加动态柱高已经足够清晰。3.3 数值标签显示在柱子顶部的实现热搜词里有一条是“y轴的标签如何在每个柱子上面显示”这个需求在Axure原生组件里很好做。只需要在中继器内部再放一个文本标签放在矩形上方一定距离的位置并把文本内容绑定为[[Item.value]]。为了让标签始终紧贴柱顶有一个很关键的设置文本标签的“锚点”或对齐方式要选择“底部居中”这样无论柱子高度怎么变化文本标签的底部会保持在柱顶位置文本本身不会飘走。当然如果你不想让标签跟着柱子顶走而是固定在图表区域内某个高度那就要把标签放中继器外部手动调整位置。但我建议直接用中继器内部的跟随方案因为它能保证数据变化后标签位置始终正确。还有一个小细节柱顶数值通常需要加一个单位后缀比如“万”或“%”。你可以在表达式里拼接字符串例如[[Item.value %]]这样显示出来就是“36%”的效果。4. 交互体验扩展鼠标悬停、点击位置与自定义组件事件4.1 鼠标悬停显示数值气泡静态柱状图等于完成了70%剩下的30%在于交互。最常见的交互是鼠标移入柱子时浮出一个气泡框显示具体数值。先用动态面板制作一个“气泡提示”面板默认隐藏里面有一个圆角矩形和一行文本。然后回到中继器内部选中柱子矩形添加“鼠标移入时”的交互用例选择“显示”气泡面板同时“设置文本”将气泡里的文字更新为[[Item.name Item.value]]。需要注意一个坑如果直接在单个柱子矩形上做交互由于中继器内部的事件不会自动传递外部动态面板的引用你需要用“移动”和“显示”动作把动态面板移到鼠标位置附近。Axure 9.0里可以点击交互编辑器中的“鼠标位置”作为移动目标点的参考坐标然后对动态面板执行移动。如果你希望气泡跟随鼠标移动可以把“移动”事件的触发条件设为“鼠标移动时”并选择“跟随鼠标移动”这个选项。4.2 点击柱子后在点击位置显示详情热搜词里还有一条“鼠标点那儿在哪儿显示柱状图”实际上是用点击事件来触发信息展示。我的做法是先制作一个动态面板里面放一个自定义弹层弹层里可以包含柱子的名称、数值、甚至一个迷你柱状图。初始状态下这个面板是隐藏的。选中中继器内部的柱子矩形添加“鼠标单击时”的交互用例先是“移动”面板到当前鼠标所在位置再“显示”面板。这样只要你点击画布上任何一根柱子弹层就会在点击位置附近出现展示对应的详细数据。要注意的是鼠标位置默认是相对画布的坐标如果原型嵌在网页里需要用“窗口坐标”来避免偏差。实际项目里我通常会把弹层的位置偏移一点点比如向右移动20px、向下移动10px防止弹层挡住鼠标导致看不清柱子。4.3 将柱状图封装为自定义组件并绑定原生事件如果你想在多个页面复用同一个柱状图直接把中继器加矩形的一套东西打包成一个自定义组件右键选择“创建组件”。组件内部的数据、交互逻辑全部封装好在主页面只需要替换组件的数据集就能生成不同的柱状图。这里我可以提到一个相对进阶的用法自定义组件绑定原生事件。Axure 9.0允许自定义组件在内部触发某些事件并把事件暴露到主页面上。比如我想在点击某根柱子时让主页面弹出一个文本框显示被点击柱子的名称。做法是在组件内部创建一个动态面板作为事件出口。然后在组件内部的柱子矩形“单击时”用例里除了显示气泡之外再添加一个“触发事件”动作选择组件向外暴露的“单击柱子”事件并传递当前柱子的名称和数值。这样一来主页面只需要在组件上创建一个同名的交互用例就能接收到组件内部点击柱子的事件。这种玩法等同于编程里的“自定义事件”它让柱状图从一个静态展示品升级成一个可以双向通信的交互组件。对于复杂的数据看板原型来说这个能力非常实用。5. 常见问题与排查技巧实录5.1 中继器数据显示为NaN或者空白这是最常见的错误。通常是因为表达式里的列名大小写不一致或者列名本身写错了。Axure的表达式对大小写敏感数据集里定义了Value表达式写[[item.value]]就会得不到结果。排查的时候先打开中继器的数据集确认列名再双击进入中继器内部看选中矩形的“尺寸”绑定表达式逐字对比列名。另一个原因是新拖入的中继器默认有“Column0”这列如果你没有重命名就直接绑定[[Item.value]]Axure是找不到这个字段的。所以新建中继器后第一件事就是打开数据集编辑列名把不需要的默认列删掉只保留name和value两列。这样做还能避免后续数据更新时因为多余列导致的数据错位。5.2 柱子重叠或者间距不一致柱子重叠几乎可以断定是中继器内部的矩形宽度加上项目间距之后超过了中继器的网格列宽。比如中继器项目间距设了0矩形宽度又是80px那么每根柱子都会紧贴着下一根。你想留出缝隙就要在“布局”里设置合适的“项目间距”并且确保这个间距值大于0。如果设置了间距仍然重叠请检查中继器是否被意外设置成了“垂直”排列垂直排列时柱子就会从上到下堆叠而不是横排。另外当你手动调整了画布缩放比例后中继器的实际布局可能会有偏差。可以在浏览器预览之前按Ctrl0恢复100%缩放再检查一遍。这个坑在4K屏上尤其容易出现我每次做完原型都要缩小检查一遍柱子间距是否均匀。5.3 数据更新后柱高不刷新中继器在运行时的数据更新并不会自动触发所有绑定表达式的刷新。尤其是当你用“更新行”动作修改了某条数据的value值柱子的高度可能还是旧数据。解决办法是在更新行之后紧接着添加一个“重新加载中继器”的动作。重新加载会读取中继器数据集的最新内容并刷新所有绑定表达式。这里有一个经验如果是通过全局变量或者文本框输入来控制图表数据最好把所有数据维护集中在一个“数据面板”里面板上的数据变化时统一触发中继器的重新加载。这样维护起来非常方便不会出现漏刷新导致的数据错乱。5.4 从Echarts思维转换到原生组件的几个关键差异很多用过Echarts的人初学原生组件方案会觉得处处别扭。比如Echarts里设置渐变色只需要在配置项里写一个linearGradient但在Axure原生组件里你要选矩形填充的“渐变”模式手动设置渐变的起始点和结束点的颜色。好在Axure 9.0的渐变设置已经足够友好你可以在填充面板里直接编辑。再比如“纵向柱状图”在Echarts里只是换一个barWidth或者调整坐标系的方向而在Axure原生组件里其实本质是交换矩形的宽和高的绑定方式让“数据值”绑定矩形宽度而不是高度。理解了“数据驱动宽或高”的本质很多看似复杂的图表演变都会变得非常简单。至于“双y轴柱状图”以及“柱子重叠处理”这在原生组件里更多是布局规划的问题。双Y轴意味着你的绘图区需要预留左右两侧的刻度空间并且左侧的刻度对应一组数据右侧的刻度对应另一组数据。两侧数据量级差异大的时候还要分别做归一化换算。这确实比Echarts复杂一些但它也逼着你把数据口径想得更清楚在做需求分析的时候反而是件好事。最后再分享一个我在实际项目中用得最多的技巧永远先做好一个静态样板柱把填充色、圆角、文本标签的相对位置都调整到最理想状态再进入中继器做绑定。中继器内部的环境调试受限较多如果你连基础样式都没定就进中继器后面改起来会非常痛苦。这套流程我反复用了几十个项目每次都很稳。等你把柱子做熟了再去做折线图、饼图无非是换一个可视化元件的映射思路底层的数据驱动逻辑是通用的。