当前位置：网站首页>Datagear uses coordinate mapping table to make geographic coordinate data visualization Kanban

Datagear uses coordinate mapping table to make geographic coordinate data visualization Kanban

2022-06-21 19:53:00 【DataGear】

DataGear The data set structure of is composed of Dataset properties It means , Data set attributes are not required to be consistent with the actual data structure , Can be added freely 、 edit 、 Delete . Take advantage of this feature , You can add placeholder attributes to the dataset （ There is no corresponding actual data ）, Then when the Kanban shows its associated charts , adopt dg-chart-listener Of onUpdate The function completes the data , So as to realize the data expansion function .

This paper takes the flying line map as an example , Describes how to take advantage of these features , Is a dataset that contains only region name information , Make data visualization kanban .

Suppose you have the following region name data set ：

name ：

 Source region name / Destination area name

data ：

 Source region name ,  Destination area name 
 xinjiang ,       Beijing 
 sichuan ,       Beijing 
 guangdong ,       Beijing 
 Zhejiang ,       Beijing

After preview , Its attribute list is ：

 name          type 
 Source region name     character string 
 Destination area name     character string

The map Flyline map requires the data set to have the following attributes ： Source longitude 、 Source latitude 、 End longitude 、 Latitude of destination , therefore , These four placeholder attributes are manually added here for the above data set ：

 name             type 
 Source region name        character string 
 Destination area name        character string 
 Longitude of source region        The number 
 Source latitude        The number 
 Terminal longitude        The number 
 Latitude of the final region        The number

then , New map Flyline map , As shown below ：

 name ： Map Flyline map 
 Chart type ： Map Flyline map 
 Data sets ：
 Longitude of source region   ->   Source longitude 
 Source latitude   ->   Source latitude 
 Terminal longitude   ->   End longitude 
 Latitude of the final region   ->   Latitude of destination

At this point, the display chart will be a blank Flyline chart , Because there is no actual geographic coordinate data .

then , New Kanban , Add the above chart , To add dg-chart-listener Chart listener , And through its onUpdate Function to complete geographic coordinate data , As shown below ：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .chart{
       display: inline-block; width: 100%; height: 500px; } </style>
<script> // Region name -> Geographic coordinate mapping table  var coordMap= {
       " xinjiang ": [85.523256,41.094106], " sichuan ": [103.037483,30.450264], " guangdong ": [113.560737,23.669933], " Zhejiang ": [119.962996,29.037435], " Beijing ": [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[' Source region name ']] || {
      }); var targetCoord = (coordMap[di[' Destination area name ']] || {
      }); di[' Longitude of source region '] = srcCoord[0]; di[' Source latitude '] = srcCoord[1]; di[' Terminal longitude '] = targetCoord[0]; di[' Latitude of the final region '] = targetCoord[1]; } chart.resultData(result, datas); } }; </script>
</head>
<body>
<div class="chart" dg-chart-listener="chartListener" dg-chart-widget=" Above chart ID"></div>
</body>
</html>