通過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),需要通過看板編輯頁面添加看板資源功能添加至看板。
效果圖如下所示:
源碼地址:
Gitee:https://gitee.com/datagear/datagear