数据可视化API之弧线图实现

前言

数据可视化API（Web），是基于腾讯位置服务JavaScript API GL实现的专业地理空间数据可视化渲染引擎。
通过这套API，可以实现轨迹数据、坐标点数据、热力、迁徙、航线等空间数据的可视化展现。

使用步骤

1、注册成为腾讯位置服务开发者，并进入控制台 -> key管理界面创建key；

2、数据可视化API（以下简称可视化API），所提供的可视化效果是以图层的方式叠加在JavaScript API GL之上，图层中所显示的数据由实例化的对象统一管理。

3、加载可视化API

可视化API是以 Javascript API GL 的附加库的形式加载的，请确保：
引入时须传入&libraries=visualization参数（查看： Javascript API GL加载参数说明）

<script src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY&libraries=visualization"></script>

应用场景

弧线图用以展示两点之间的关联，可以用在迁徙图等表示流向的场景中。

代码

大家可通过参考手册
先了解下参数详情。

创建弧线图

// 创建地图
var map = new TMap.Map('container', {center: new TMap.LatLng(40.040934, 116.272677)
});// 创建弧线图
var arc = new TMap.visualization.Arc({pickStyle: function(arcLine) { // 样式映射函数var red = {color: '#DD0000', animateColor:'#FF0000'};var blue = {color: '#0000DD',animateColor: '#0000FF'};return arcLine.id == 'red' ? red : blue;},
}).addTo(map); // 通过addTo()添加到指定地图实例// 设置数据，若需要更新数据则再次调用setData方法即可
arc.setData([{id: 'red',from: { lat: 40.040934, lng: 116.272677 }, // 弧线起点to: { lat: 38.040934, lng: 116.272677 }  // 弧线终点},{id: 'red',from: { lat: 40.040934, lng: 116.272677 },to: { lat: 38.040934, lng: 116.272677 }}
]);

获取点击的弧线

如果您希望获取鼠标点击的弧线图形的具体信息，可以监听弧线图的click事件。

arc.on('click', function(evt) {if (evt.detail.arc) {console.log('点击了：', evt.detail.arc); // 用户所点击的图形所对应的数据} else {console.log('未点击到图形');}
});

效果图

在线示例

数据可视化API之弧线图实现相关推荐

java弧线_数据可视化API之弧线图实现
前言数据可视化API(Web),是基于腾讯位置服务JavaScript API GL实现的专业地理空间数据可视化渲染引擎. 通过这套API,可以实现轨迹数据.坐标点数据.热力.迁徙.航线等空间数据的 ...
数据可视化API之轨迹图实现
前言数据可视化API(Web),是基于腾讯位置服务JavaScript API GL实现的专业地理空间数据可视化渲染引擎. 通过这套API,可以实现轨迹数据.坐标点数据.热力.迁徙.航线等空间数据的 ...
python雷达图数据_Python怎么画雷达图？Matplotlib数据可视化008：雷达图\极坐标图...
系列文章链接:[Python菜鸟进阶大神]Matplotlib数据可视化001:基础API汇总&散点图mp.weixin.qq.com [Python菜鸟进阶大神]Matplotlib数据可 ...
python画厢式图_Python数据可视化：箱线图多种库画法
概念箱线图通过数据的四分位数来展示数据的分布情况.例如:数据的中心位置,数据间的离散程度,是否有异常值等. 把数据从小到大进行排列并等分成四份,第一分位数(Q1),第二分位数(Q2)和第三分位数(Q ...
python 数据可视化———绘制饼状图（bar）
python 数据可视化---绘制饼状图(bar) 从入门到入门,快速上手饼状图前言 Pyplot 是 Matplotlib 的子库,提供了和 MATLAB 类似的绘图 API. Pyplot 包含 ...
人口热力图java_数据可视化API之热力图实现
前言数据可视化API(Web),是基于腾讯位置服务JavaScript API GL实现的专业地理空间数据可视化渲染引擎. 通过这套API,可以实现轨迹数据.坐标点数据.热力.迁徙.航线等空间数据的 ...
数据可视化: matplotlib绘制动态图及3维动画
动画可以有趣地展示某种现象.相比于静态图表,人们更容易被动画和交互式的图表所吸引.在描绘时间序列数据时,动画更有意义,例如多年来股票价格的波动,过去十年气候的季节性变化和和趋势,因为我们可以看到特定参 ...
python画折线图详解-Python数据可视化(一) 绘制折线图和散点图
数据可视化示例对数据可视化的浅认知数据可视化是任何数据科学或机器学习的重要组成部分.可视化能将数据以更加直观的方式展现出来,使数据更加客观.更具说服力.同时,也易于发现隐藏在数据中的规律和意义.尤 ...
python绘制不带颜色曲线图_Python数据可视化库-Matplotlib——折线图，子图绘制
# coding:utf-8 import pandas as pd import numpy as np from matplotlib import pylab as plt # 导入数据可视化库 ...
seaborn线性关系数据可视化：时间线图|热图|结构化图表可视化
一.线性关系数据可视化lmplot( ) 表示对所统计的数据做散点图,并拟合一个一元线性回归关系. lmplot(x, y, data, hue=None, col=None, row=None, p ...