DataGear 製做支持全國、省、市三級數據鑽取效果的地圖數據可視化看板

經過DataGear的參數化數據集、圖表聯動和看板API功能，能夠很方便地製做支持數據鑽取效果的數據可視化看板。javascript

首先，以上級地區名爲參數，新建一個參數化SQL數據集：css

SELECT
	COL_NAME,              --地區名
	COL_VALUE,             --地區指標數值
	COL_PARENT AS COL_MAP  --上級地區名，同時做爲地圖名
FROM
	T_ANALYSIS
WHERE
<#if 上級地區名??>
    COL_PARENT = '${上級地區名}'
<#else>
    COL_PARENT = '中國'
</#if>

參數：html

名稱        類型       必填
上級地區名  字符串     否

T_ANALYSIS表數據示例：java

COL_NAME         COL_VALUE         COL_PARENT
山東	         160               中國
北京             200               中國
...
朝陽區           195               北京
海淀區           200               北京
...
青島市           10                山東
濟南市           160               山東
...
歷下區           50                濟南市
市中區           78                濟南市
歷城區           150               濟南市
...

而後，新建一個使用上述數據集的地圖圖表：git

圖表類型：基本地圖
數據集列標記：
COL_NAME：地區名稱 (name)
COL_VALUE：指標數值 (value)
COL_MAP：地圖名 (map)

而後，新建可視化看板，填寫以下看板模板內容：sql

<!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.dataSetParamValue(0, 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.getChart("chart1");
        chart.dataSetParamValue(0,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>

點擊[保存並展現]按鈕，打開看板展現頁面，完成！！！json

注：上述示例中使用了沒有內置的濟南市地圖JSON文件（jinan.json），須要經過看板編輯頁面添加看板資源功能添加至看板。url

效果圖以下所示：spa

官網地址：http://www.datagear.techcode

源碼地址：https://gitee.com/datagear/datagear

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