引言
条形图（含横向条形图、纵向条形图）是数据对比场景的核心图表，凭借 "类别清晰、数值直观" 的优势，广泛应用于产品功能满意度评分、各部门业绩对比、多维度指标排名等场景。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，放置在对应条形右侧（与条形垂直居中对齐，间距 30px）；
（5）条形图和类别、数值标签组合，便于后续维护 ：
（5）添加图表标题：
- 拖出「文本」元件，输入 "学生学习进度（横向）"，字体 16px、颜色 #1E293B、加粗，放置在图表上方居中位置，与图表间距 30px。