axure源文件_Axure函数应用：指示线跟随地图所选区域，并展示相应数据可视化...

本篇文章为大家介绍了如何利用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

本文由 @灰_白原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。

axure源文件_Axure函数应用：指示线跟随地图所选区域，并展示相应数据可视化...相关推荐

利用百度地图api将excel中的经纬度数据可视化
利用百度地图api将excel中的经纬度数据可视化因为本人最近在研究2019年研究生数学建模华为杯D题,想将它3个excel文件汽车的经纬度数据在地图上画出来,找了很多方法才实现.现将它分享给大家, ...
Echarts中对地图的指定区域文字展示指定的颜色
Echarts中对地图的指定区域文字展示指定的颜色项目场景: 为提高客户满意度,修改地图中某个区域的文字颜色解决方案: 通过修改series-map.data.label.color属性参考链接 ...
mapv结合百度地图treejs实现炫酷三维大数据可视化效果
随着大数据.云计算.物联网的诞生.大量的设备数据.传感器数据.行为数据.日志数据.基础画像数据.运行数据等等都对传统的数据展现提出了新的要求 .随着前端技术的不断成熟,客户对业务系统的要求也由原来的简 ...
从拿破仑行军地图到自拍--10 个有趣数据可视化示例及其工作原理
1. 拿破仑行军地图 2. 1854 Broad Street 霍乱爆发地图 3. 克里米亚战争中的死亡原因 4. 鸡蛋是如何成型的 5. 交互式政府预算 6. 美国人怎么吃 7. 下一个美国 8. ...
axure源文件_Axure教程：实现网易云音乐有声播放效果
为了方便讲解,我们首先在桌面新建一个文件夹,命名为音乐.1.将自己想要演示播放的MP3音乐文件放在这个文件夹里面.2.给播放页添加一个中继器,随便命名,我给它命名为[音乐地址链接器],用来链接播放本地 ...
20180402-E · US Tuition Costs · ggplot2, 地图热力图 gganimate 动图 · R 语言数据可视化案例源码
所有作品合集传送门: Tidy Tuesday 2018 年合集传送门: 2018 US Tuition Costs Average Tuition and Educational Attainmen ...
20180416-H · Global Mortality · ggplot2 地图 gganimate 动图动态地图 · R 语言数据可视化案例源码
所有作品合集传送门: Tidy Tuesday 2018 年合集传送门: 2018 Global Mortality What do people die from? 在过去的几个世纪里,世界发生了很 ...
r包调用legend函数_R语言实现基于朴素贝叶斯构造分类模型数据可视化
本文内容原创,未经作者许可禁止转载! 目录一.前言二.摘要三.关键词四.算法原理五.经典应用六.R建模 1.载入相关包(内含彩蛋): 1.1 library包载入 1.2 pacman包载 ...
python unique函数_《Python编程从入门到实践》json数据可视化练习详解
<Python编程从入门到实践>16.2中,计算收盘价均值的程序有些不易看懂,结合我自己的理解进行一些说明. 使用的数据集:join格式的数据, 数据集是由多个字典为元素组成的列表.每个字 ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...