Axure 9.0 原生组件：绘制折线图

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