前言
Hello！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>
本次课程我们继续来学习一下，基本元件的应用。上一篇讲到了如何绘制饼形图表，本篇将继续教大家绘制图表，就是如何用基本元件画一个面积图表。
这里我们同样找来了一个真实图表，用作蓝本进行绘图。从图片中可以看到，一个面积图表的组成部分包括：数据区、数值轴、分类轴、网络线、图例。下面就来给大家讲解一下绘图步骤。
第一步：绘制Y轴（数值轴）
首先拖入一个文本标签，修改文本标签的字体、大小、颜色，设置为右侧对齐（这是为了后面输入多行数值时，都能靠右对齐）；然后双击文本标签，修改文本为Y轴数值（这里可以一行输入一个数值，输入一个数值后，回车再输入下一个）；接着设置文本的行距为40。
如此就不用一行拖入一个文本标签，再逐个修改数值了。要学会灵活变通，充分利用Axure元件的特性。
第二步：绘制X轴水平线（网格线）
首先拖入一个水平线，按住Shift键水平拖动到合适长度（按住Shift键拖拉线段，可实现水平拖动，反之为任意拖动）；修改水平线的线段颜色，再修改其线段类型为虚线；然后按住Ctrl键+鼠标左键，拖拉进行复制，将水平线复制成7份，线段间隔39像素（这里要算上线宽的1像素，所以数值的间隔是40）。
第三步：绘制X轴刻度
首先拖入一个垂直线，修改垂直线的线段颜色（与网格线同色），设置其高度为5；然后按Ctrl+C将垂直线复制至剪贴板，再按11次Ctrl+V，将其粘贴多11份（这里由于垂直线体积小，而且复制次数多，所以使用快捷键，操作更便捷些）。
接着拖动第一个垂直线到X轴的前端，拖动最后一个垂直线到X轴的末端，然后选中12个垂直线，设置为顶部对齐和水平分布（这里是利用顶部对齐与水平分布的特性，进行快速排版，既省事又整齐）。
第四步：绘制X轴月份（分类轴）
首先拖入一个文本标签，修改文本标签的字体、大小、颜色，设置为居中对齐（这是为了后面修改文本时，输入不同的月份都能居中对齐垂直线），并修改文本为一月。
然后按Ctrl+C将一月复制至剪贴板，再按11次Ctrl+V，将其粘贴多11份（这里同样是由于文本标签体积小，而且复制次数多，所以使用快捷键，操作更便捷些）。
接着拖动第一个月份到X轴的前端，并居中对齐刻度（垂直线），拖动最后一个月份到X轴的末端，居中对齐刻度；再选中12个月份，设置为顶部对齐和水平分布；最后修改文本为相应的月份。
第五步：绘制图例
首先拖入一个矩形，修改矩形的大小为10×10，填充颜色为蓝色，然后按Ctrl+鼠标左键，拖拉复制一个月份文本作为图例文本，修改图例文本为目标文字。
接着选中矩形与文本，按住Ctrl+鼠标左键，拖拉复制多一份图例，然后修改后面的图例文本为目标文字，修改矩形的填充颜色为绿色；再然后调整组件为中部居中，并拖动图例居中对齐X轴。
第六步：绘制数据区
首先拖入一个矩形，拖动至合适长度（左端对齐第一个刻度，右端对齐最后一个刻度），并拖到靠近X轴（这是为了后面以X轴刻度为参考，来给矩形添加边界点）。
接着在矩形上点击右键，在弹出菜单中选择变换形状_编辑点，然后在X轴刻度相对位置上点击左键，给矩形的顶边增加10个边界点，再用同样方法给矩形的底边增加10个边界点（这是为了后面拖动顶边的边界点时，能对齐底边的边界点，顺利实现垂直拖动）。
再接着逐个垂直拖动矩形顶边的边界点，到合适位置；然后修改矩形的填充颜色为蓝色，设置边框为1，边框颜色为黑色（与蓝色有对比度的颜色即可）。
最后将矩形复制多一份，修改新矩形的填充颜色为绿色；再在新矩形上点击右键，在弹出菜单中选择变换形状_编辑点（这是打开边界点编辑状态，也可以直接点击工具栏的编辑点），逐个垂直拖动新矩形顶边的边界点，到合适位置（区别于前面的矩形）。
结语
拖动蓝色和绿色两个数据区至图表上，底部对齐X轴，并置于底层，接着移动月份和图例靠近X轴。OK了，一个面积图表就绘制完成了。
在线预览
效果图在线预览：https://u.pmdaniu.com/L8A5p
相关课件
为了帮助各位同学，能快速理解和练习Axure案例，本专栏每篇教程都会提供RP格式课件下载。
课件整包链接：
https://item.taobao.com/item.htm?id=631599964711
链接长期有效。
（默林如斯原创出品，未经许可，禁止转载，侵权必究）
《Axure 9 案例教程-基础篇》：以实战案例的角度，讲解Axure 9 的基础操作，帮助大家从案例中学习产品原型的设计思维，带你快速进入实战阶段！！适合Axure入门的同学！！点击了解课程简介>>
欢迎关注《产品经理知识与资源》专栏，这里专注原创Axure实战原型、Axure原型模板、Axure元件库、Axure图标库；2012年入行的原创实力保障！！点击前去关注>>
7887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
