Axure函数应用:指示线跟随地图所选区域,并展示相应数据可视化
2017-09-04 00:00
761 查看
本篇文章为大家介绍了如何利用Axure打造“指示线跟随地图所选区域,并展示相应数据可视化”的效果,其中需要做到的函数计算为重难点。
知识重点难点
- 直角三角形斜边长度与斜边角度计算;
- 进度条制作。
元件准备
地图“map”
- 钢笔勾出地图各板块形状,并分别命名;
- 为各形状设置Interaction Styles,主要是MouserOver与Selected;
- 选择所有形状Selection Group。
跟随线“map-line”
- 钢笔勾出一条曲线,命名为“map-line”,确保其起点与终点水平;
- 添加一个小小的圆形,命名为“P”,放置与曲线终点处。
动态面板“可视化数据面板”
- 添加一动态面板命名“可视化数据面板”,配置两个状态“1”、“0”,初始状态为1;
- 状态 1 中添加数据完成时的样式内容;
- 状态 0 中添加数据加载过程中的样式内容。
比例进度条“可视化x”
这里做的是小于50%的比例样式,添加圆或扇形如下图,每个“可视化x”均为一个动态面板,初始隐藏状态。
看到结构就应该知道,其实就是角度改变的做法,后面我就不详细讲了。
效果实现
主要事件与逻辑关系
实现难点:跟随线指向所选点。
由图可知,通过得到跟随线map-line的长度C与角度a即可,又由图可知其实是求一个直角三角形的斜边长度与角度,根据数学公式最终得出如下函数计算:
C=Math.sqrt(A*A+B*B)
a=Math.atan(A/B)*180/3.14159
取整:
C=Math.ceil(Math.sqrt(A*A+B*B))
a=Math.ceil(Math.atan(A/B)*180/3.14159)
其中A、B为目标点与P点的坐标之差。
源文件下载链接:https://pan.baidu.com/s/1wD1SvnY4V4RW7WimE2YUSQ 密码:8qyg
相关文章推荐
- php和jquery实现地图区域数据统计展示数据示例
- PHP+Mysql+jQuery实现地图区域数据统计-展示数据
- PHP+Mysql+jQuery实现地图区域数据统计-展示数据
- 技术积累应用-可视化编程平台应用方式-数据展示
- 技术积累应用-可视化编程平台应用方式-数据展示控制
- 小项目-数据可视化:应用dash将工作信息呈现在地图上
- WPF 数据可视化 大屏展示 实现地图仿echarts模拟迁移效果 Telerik图表 仪表盘
- php和jquery实现地图区域数据统计展示数据示例
- 数据可视化神器Tableau学习小结3——函数及应用
- echarts3地图如何添加点击事件? 点击地图相应的区域ajax获取并展示本区域省下面所有市的信息
- PHP+Mysql+jQuery实现地图区域数据统计-展示数据
- Matlab数据的可视化 -- 线性图函数plot
- ExtJS grid简单应用之 展示JSON数据
- 关于C语言通过函数传递多个数据————指针的应用
- 第10章 指针(七) 应用1------函数间数据的双向传递
- PHP+Mysql+jQuery实现地图区域数据统计-载入数据
- Oracle:游标、DML触发器、存储过程、函数、定时器、数据导入导出、sql loader的应用语法格式及注解
- 【数据可视化】地理信息可视化应用
- 大数据可视化应用领域探析
- 数据分析与展示——Matplotlib基础绘图函数示例