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>
点击[保存并展示]按钮，打开看板展示页面，完成！！！
效果图如下所示：
源码地址：
Gitee：https://gitee.com/datagear/datagear