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

通過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.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文件(jinan.json),需要通過看板編輯頁面添加看板資源功能添加至看板。

效果圖如下所示:

官網地址:http://www.datagear.tech

源碼地址:

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

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章