当前位置：网站首页>DataGear 使用坐标映射表制作地理坐标数据可视化看板

DataGear 使用坐标映射表制作地理坐标数据可视化看板

2022-06-21 18:10:00 【DataGear】

DataGear 的数据集结构是由数据集属性表示的，数据集属性并不要求与实际的数据结构一致，可以自由新增、编辑、删除。利用这一特性，可以为数据集添加占位属性（没有对应实际数据），然后在看板展示其关联的图表时，通过dg-chart-listener的onUpdate函数补全数据，从而实现数据扩展功能。

本文以地图飞线图为例，介绍如何利用上述特性，为仅包含地区名称信息的数据集，制作数据可视化看板。

假设有如下地区名称数据集：

名称：

源点地区名/终点地区名

数据：

源点地区名, 终点地区名
新疆,      北京
四川,      北京
广东,      北京
浙江,      北京

执行预览后，它的属性列表为：

名称        类型
源点地区名   字符串
终点地区名   字符串

地图飞线图需要数据集具有如下属性：源点经度、源点纬度、终点经度、终点纬度，因此，这里为上述数据集手动添加这四个占位属性：

名称           类型
源点地区名      字符串
终点地区名      字符串
源地区经度      数值
源地区纬度      数值
终地区经度      数值
终地区纬度      数值

然后，新建地图飞线图，如下所示：

名称：地图飞线图
图表类型：地图飞线图
数据集：
源地区经度  ->  源点经度
源地区纬度  ->  源点纬度
终地区经度  ->  终点经度
终地区纬度  ->  终点纬度

此时展示图表将是空白飞线图，因为并没有实际的地理坐标数据。

然后，新建看板，添加上述图表，为其添加dg-chart-listener图表监听器，并通过它的onUpdate函数补全地理坐标数据，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .chart{
       display: inline-block; width: 100%; height: 500px; } </style>
<script> //地区名->地理坐标映射表 var coordMap= {
       "新疆": [85.523256,41.094106], "四川": [103.037483,30.450264], "广东": [113.560737,23.669933], "浙江": [119.962996,29.037435], "北京": [116.651482,40.253657], }; var chartListener= {
       onUpdate: function(chart, results) {
       var result = chart.resultFirst(results); var datas = chart.resultDatas(result); for(var i=0; i<datas.length; i++) {
       var di = datas[i]; var srcCoord = (coordMap[di['源点地区名']] || {
      }); var targetCoord = (coordMap[di['终点地区名']] || {
      }); di['源地区经度'] = srcCoord[0]; di['源地区纬度'] = srcCoord[1]; di['终地区经度'] = targetCoord[0]; di['终地区纬度'] = targetCoord[1]; } chart.resultData(result, datas); } }; </script>
</head>
<body>
<div class="chart" dg-chart-listener="chartListener" dg-chart-widget="上述图表ID"></div>
</body>
</html>