引言
在原型设计中，数据可视化是传递核心信息的关键手段，而折线图凭借 "清晰展示数据趋势" 的优势，广泛应用于销售波动、用户增长、指标变化等场景。Axure 9.0 作为主流原型工具，虽未内置现成折线图组件，但通过「形状 + 交互 + 中继器」的组合，能实现从静态展示到动态交互的全场景需求。无论你是产品经理、UI 设计师，还是刚入门 Axure 的新手，掌握折线图绘制技巧都能让你的原型更具说服力 ------ 通过几篇文章将从基础操作到进阶实战，手把手教你搞定 Axure 9.0 折线图！
实战效果图
（一）数据准备与梳理：折线图的 "灵魂"
折线图的核心是 "数据趋势"，提前整理清晰数据是前提，建议按以下格式梳理（以「某产品月活跃用户 (MAU)」为例）：
|---------|---------|---------|---------|---------|---------|---------|
| 月份 | 202X-01 | 202X-02 | 202X-03 | 202X-04 | 202X-05 | 202X-06 |
| MAU (万) | 120 | 156 | 189 | 210 | 235 | 268 |
数据整理原则：
- 横轴（X 轴）为 "类别 / 时间"，建议不超过 8 个维度（避免图表拥挤）；
- 纵轴（Y 轴）为 "数值"，需设定合理量程（本例最大值 268，量程设为 0-300 更美观）；
- 数据需准确对应，避免后续绘制时错位。
（二）绘制基础折线图
第一步：绘制坐标轴（精准对齐是关键）
（1）绘制横轴（X 轴）：
- 从左侧元件库拖出「水平线」，在画布下方放置，长度设为 500px（根据数据维度调整，6 个维度建议 500px）；
- 添加维度标签：拖出「中继器」元件。首先，输入月份（202X-01 至 202X-06）。其次，调整中继器位置。最后，设置「中继器」元件样式。a.设置中继器布局为水平，中继器中添加数据。b.双击中继器，进入中继器，设置矩形样式 ：设置宽度100和高度30；设置线宽为0；设置字体 12px、颜色 #666。
注意点：先组合横轴和纵轴，移动到100，100位置
（2）绘制纵轴（Y 轴）：
- 拖出「垂直线」，在画布左侧放置，高度设为 200px（根据数值量程调整，0-300 建议 400px）；
- 添加数值标签：拖出「中继器」元件，输入数值（0、75、150、225、300）。其次，调整中继器位置。最后，设置「中继器」元件样式。a.中继器中添加数据。b.双击中继器，进入中继器，设置矩形样式 ：设置宽度70和高度50；设置线宽为0；设置排版中右对齐，底部对齐；设置字体 12px、颜色 #666。
（3）坐标轴美化
- 选中横轴和纵轴，在右侧「样式」面板设置线条颜色 #797979、透明度20%，粗细 1px；
第二步：绘制折线与数据点
（1）确定数据点位置
- 以画布左下角为原点（0,0），根据数据计算每个点的坐标（例：202X-01 的 MAU=120，纵轴高度 400px 对应量程 300，因此 Y 坐标 = 120/300×400=160px；横轴每个维度间隔 = 600px/5=120px，因此 X 坐标 = 60px（第一个维度居中））；
注意点：可以先把数值标签、横轴、纵轴组合并锁定并放大尺寸（圆形太小）。
- 拖出「圆形」元件（数据点），直径 8px，颜色 #1890ff（主色），根据计算的坐标放置第一个点，依次复制 5 个圆形，分别调整坐标对应其余 5 个月份的数据。
（2）绘制折线
- 从左侧元件库拖出「钢笔工具」，点击第一个数据点中心，依次连接所有数据点（注意：点击时需精准对齐圆心，避免折线偏移）；
- 选中折线，在右侧「样式」面板设置线条颜色 #1890ff、粗细 3px、线条类型「实线」。
注意点：6个圆形设置顺序------置于顶层
（3）优化数据点
- 为数据点添加白色边框（颜色 #fff、粗细 1px），增强立体感；
- 若需突出重点数据（如最大值 268），可将该数据点颜色改为 #ff4d4f，直径调整为 10px。
第三步：添加数据标签与图表标题
（1）图表标题
- 拖出「文本」元件，输入标题「某产品 202X 年上半年 MAU 趋势图」，设置字体 16px、颜色 #333、加粗；
- 放置在图表上方居中位置，与坐标轴间距保持 20px，提升整体美观度。
