关于数据可视化:DataGear-制作支持全国省市三级数据钻取效果的地图数据可视化看板

42次阅读

共计 2170 个字符，预计需要花费 6 分钟才能阅读完成。

通过 DataGear 的参数化数据集、图表联动和看板 API 性能，能够很不便地制作反对数据钻取成果的数据可视化看板。

首先，以下级地区名为参数，新建一个参数化 SQL 数据集：

SELECT
    COL_NAME,              -- 地区名
    COL_VALUE,             -- 地区指标数值
    COL_PARENT AS COL_MAP  -- 下级地区名，同时作为地图名
FROM
    T_ANALYSIS
WHERE
<#if 下级地区名??>
    COL_PARENT = '${下级地区名}'
<#else>
    COL_PARENT = '中国'
</#if>

参数：

名称        类型       必填
下级地区名  字符串     否

T_ANALYSIS 表数据示例：

COL_NAME         COL_VALUE         COL_PARENT
山东             160               中国
北京             200               中国
...
朝阳区           195               北京
海淀区           200               北京
...
青岛市           10                山东
济南市           160               山东
...
历下区           50                济南市
市中区           78                济南市
历城区           150               济南市
...

而后，新建一个应用上述数据集的地图图表：

图表类型：根本地图
数据集列标记：COL_NAME：地区名称 (name)
COL_VALUE：指标数值 (value)
COL_MAP：地图名 (map)

而后，新建可视化看板，填写如下看板模板内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-chart{
  display: inline-block;
  width: 100%;
  height: 480px;
}
</style>
<script type="text/javascript">
var paramHistory = [];
var chartListener =
{onUpdate: function(chart, results)
    {
        // 存储以后下级地区名，用于反对返回操作
        var paramVal = chart.dataSetParamValueFirst(0);
        if(!paramVal)
            paramHistory = [];
        else
            paramHistory.push(paramVal);
        
        $("#title").html((paramVal ? paramVal : "全国") + "- 数据");
    }
};
$(document).ready(function()
{$("#backButton").click(function()
    {
        // 获取上一次操作的下级地区名，设置为图表参数，而后刷新图表
        paramHistory.pop();
        var paramVal = (paramHistory.pop() || null);
        var chart = dashboard.chartOf("chart1");
        chart.dataSetParamValueFirst(0, paramVal);
        chart.refreshData();});
});
</script>
</head>
<body class="dg-dashboard" dg-chart-map-urls="{' 济南市 ':'jinan.json'}">
    <div style="position: absolute;left:1;top:1;font-size:12px;">
    DataGear <br>
    http://www.datagear.tech
</div>
<div style="font-size:2em;text-align:center;margin-bottom:5px;">DataGear 看板示例 </div>
<p> </p>
<div style="position:relative">
    <div id="title" style="text-align:center;font-size:1.2em;font-weight:bold;"></div>
    <button id="backButton" style="position:absolute;right:2em;top:0;"> 返回 </button>
</div>
<div id="chart1" class="dg-chart"
    dg-chart-options="{title:{show:false}}"
    dg-chart-link="{target:'chart1',data:{name:0}}"
    dg-chart-listener="chartListener"
    dg-chart-disable-setting="true"
    dg-chart-widget="3fa7ecaf11742397c58b">
</div>
</body>
</html>

点击 [保留并展现] 按钮，关上看板展现页面，实现！！！

注：上述示例中应用了没有内置的济南市地图 GeoJSON 文件（jinan.json），须要通过看板编辑页面增加看板资源性能增加至看板。

举荐 GeoJSON 下载地址：https://datav.aliyun.com/portal/school/atlas/area_selector

效果图如下所示：

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

源码地址：
Gitee：https://gitee.com/datagear/datagear
Github：https://github.com/datageartech/datagear

正文完