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

最新推荐文章于 2024-04-26 11:16:51 发布

DataGear

最新推荐文章于 2024-04-26 11:16:51 发布

阅读量474

点赞数

文章标签：数据可视化可视化数据分析大数据 echarts

本文链接：https://blog.csdn.net/datagear/article/details/123658783

版权

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>

点击[保存并展示]按钮，打开看板展示页面，完成！！！

效果图如下所示：

官网地址：http://www.datagear.tech

源码地址：

Gitee：https://gitee.com/datagear/datagear

Github：https://github.com/datageartech/datagear

大屏模板地址：https://gitee.com/datagear/DataGearDashboardTemplate

DataGear

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DataGear 使用坐标映射表制作地理坐标数据可视化看板

DataGear 的数据集结构是由数据集属性表示的，数据集属性并不要求与实际的数据结构一致，可以自由新增、编辑、删除。利用这一特性，可以为数据集添加占位属性（没有对应实际数据），然后在看板展示其关联的图表时，通过dg-chart-listener的onUpdate函数补全数据，从而实现数据扩展功能。本文以地图飞线图为例，介绍如何利用上述特性，为仅包含地区名称信息的数据集，制作数据可视化看板。假设有如下地区名称数据集：名称：源点地区名/终点地区名数据：源点地区名, 终点地区名新疆,
复制链接

扫一扫