引言条形图含横向条形图、纵向条形图是数据对比场景的核心图表凭借 “类别清晰、数值直观” 的优势广泛应用于产品功能满意度评分、各部门业绩对比、多维度指标排名等场景。Axure 9.0 虽无内置条形图组件但通过「矩形元件 坐标轴定位 交互绑定」的组合可实现从静态数据展示到动态排序、悬停详情、多组数据切换的全场景需求。无论你是产品经理、运营还是 Axure 新手掌握条形图绘制技巧能让数据对比更有说服力 —— 本文将手把手教你从 0 到 1 搞定 Axure 9.0 条形图附横向 / 纵向双形态教程和实战案例效果图实战一、数据准备与梳理条形图的 “核心逻辑”条形图的核心是 “类别 - 数值” 对应关系需先整理数据并明确展示形态横向 / 纵向建议按以下格式梳理以「某产品功能满意度评分」为例功能类别进度横向条形图长度 背景宽度 ×进度理论课完成度85%400*0.85技能训练达标率92%400*0.92实践项目参与率78%400*0.78学分获取率88%400*0.88二、横向条形图绘制类别垂直排列数值水平延伸1绘制背景条拖出「矩形2」绘制背景设置宽度 400px、高度 10px统一高度便于对齐填充色 E5E7EB圆角 10px优化视觉复制该矩形3份矩形之间间距70px;2绘制进度复制背景条4份分别修改宽度为 340px、368px、312px、352px填充色依次设为 #1E40AF、#F97316、#10B981、#9333EA区分不同类别3组成条形图把进度条覆盖到背景条上我们只要修改X轴值和Y轴值X轴值和Y轴值等于背景条值;置顶进度条 ;组合背景条和进度 ;4添加类别与数值标签类别标签拖出「文本」元件输入 “理论课完成度”字体 14px、颜色 #4B5563放置在对应条形左侧与条形垂直居中对齐间距 30px数值标签拖出「文本」元件输入 “85%”字体 14px、颜色 #333放置在对应条形右侧与条形垂直居中对齐间距 30px5条形图和类别、数值标签组合便于后续维护 5添加图表标题拖出「文本」元件输入 “学生学习进度横向”字体 16px、颜色 #1E293B、加粗放置在图表上方居中位置与图表间距 30px。
