Axure设计之数据图表面积图(中继器)

面积图又叫区域图。 它是在折线图的基础之上形成的, 它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充,这样一个填充区域我们叫做面积,颜色的填充可以更好的突出趋势信息。在系统开发中我们经常使用这种数据图表做统计分析。

一、效果展示

1、该示例为多色面积图,分别对种类和数量以月份为单位进行统计;

2、横轴为统计月份,纵轴分别为种类和数量坐标系,实现鼠标移入移出显示和隐藏提示框;

原型预览地址:https://gc2pcb.axshare.com

二、实现思路

1、第一步先搞定坐标轴,确定横纵轴参数;

2、第二步使用中继器,确定中继器子类中使用的元素,根据统计项将数据录入中继器;

3、第三步需要手动画线,以及由线推导面(其实就是画多边形);

4、第四步就是添加交互事件,例如鼠标移入移出显示和隐藏提示框以及显示的数据。

三、实现步骤

接下来我以以下数据作为示例数据,利用Axure RP 9软件制作一个面积图:

1、按照思路,我们先画坐标轴,这一步没啥技巧:

2、第二步,拖入一个中继器,点击进行编辑,添加矩形,线(虚线),矩形用于月份显示,虚线可以辅助画折线的点,也用来显示使用,最后要隐藏的:

3、第三步,工具头部找到插入工具选绘画:

这里我们开始绘折线,折线变曲线需要在点上右击鼠标选择:

然后画面,这一步直接复制上一步画的线,然后头尾需要连到横坐标:

4、另一个先和面按重复操作,然后再上点:

最后加上提示框,做一下交互

相关推荐
夜郎king3 天前
Axure 原型落地 HTML:基于 Trae Solo 实现 GIS 多级行政区划切换全流程实践
axure·trae solo·gis可视化
测试修炼手册15 天前
[测试工具] Axhub MCP:把 Axure PRD 变成测试用例
测试工具·测试用例·axure
梓贤Vigo16 天前
【Axure原型分享】AI自动回复机器人
交互·产品经理·axure·原型
xy345318 天前
Axure9.0中继器-初识篇
产品经理·axure·原型
Chensay.22 天前
Axure RP安装(已汉化)附下载地址
axure·结构设计
招风的黑耳23 天前
Axure动态柱状图设计指南:从静态到交互的完整实现
交互·axure·柱状图
招风的黑耳23 天前
Axure动态折线图设计指南:从静态到交互的完整实现
交互·axure·photoshop
招风的黑耳23 天前
智慧社区可视化平台:构建“现实-数字“双生社区的智能中枢
axure·原型·可视化
x***r1511 个月前
AxureRP-Setup安装步骤详解(附Axure RP原型设计与汉化教程)
ui·axure·photoshop
AC赳赳老秦1 个月前
OpenClaw与Axure联动:自动生成原型图组件、批量修改原型样式,提升设计效率
python·web安全·ui·音视频·axure·photoshop·openclaw