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 chartDataSet = chart.chartDataSetMain();
var datas = chart.resultDatasOf(results, chartDataSet);
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.resultDataOf(results, chartDataSet, 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
上一篇: 如何查看历史卫星影像地图
下一篇: 72 幅三国历史演变图