如何使用DataGear制作支持全國、省、市三級數(shù)據(jù)鉆取效果的地圖數(shù)據(jù)可視化看板

發(fā)布時間：2022-01-05 16:42:27 來源：億速云閱讀：373 作者：小新欄目：大數(shù)據(jù)

小編給大家分享一下如何使用DataGear制作支持全國、省、市三級數(shù)據(jù)鉆取效果的地圖數(shù)據(jù)可視化看板，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

通過DataGear的參數(shù)化數(shù)據(jù)集、圖表聯(lián)動和看板API功能，可以很方便地制作支持?jǐn)?shù)據(jù)鉆取效果的數(shù)據(jù)可視化看板。

首先，以上級地區(qū)名為參數(shù)，新建一個參數(shù)化SQL數(shù)據(jù)集：

SELECT
	COL_NAME,              --地區(qū)名
	COL_VALUE,             --地區(qū)指標(biāo)數(shù)值
	COL_PARENT AS COL_MAP  --上級地區(qū)名，同時作為地圖名
FROM
	T_ANALYSIS
WHERE
<#if 上級地區(qū)名??>
    COL_PARENT = '${上級地區(qū)名}'
<#else>
    COL_PARENT = '中國'
</#if>

參數(shù)：

名稱        類型       必填
上級地區(qū)名  字符串     否

T_ANALYSIS表數(shù)據(jù)示例：

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

然后，新建一個使用上述數(shù)據(jù)集的地圖圖表：

圖表類型：基本地圖
數(shù)據(jù)集列標(biāo)記：
COL_NAME：地區(qū)名稱 (name)
COL_VALUE：指標(biāo)數(shù)值 (value)
COL_MAP：地圖名 (map)

然后，新建可視化看板，填寫如下看板模板內(nèi)容：

<!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)
    {
        //存儲當(dāng)前上級地區(qū)名，用于支持返回操作
        var paramVal = chart.dataSetParamValue(0, 0);
        if(!paramVal)
            paramHistory = [];
        else
            paramHistory.push(paramVal);
        
        $("#title").html((paramVal ? paramVal : "全國") + " - 數(shù)據(jù)");
    }
};
$(document).ready(function()
{
    $("#backButton").click(function()
    {
        //獲取上一次操作的上級地區(qū)名，設(shè)置為圖表參數(shù)，然后刷新圖表
        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 >
	DataGear <br>
	http://www.datagear.tech
</div>
<div >DataGear 看板示例</div>
<p> </p>
<div >
    <div id="title" ></div>
    <button id="backButton" >返回</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>

點擊[保存并展示]按鈕，打開看板展示頁面，完成?。?！

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

效果圖如下所示：

如何使用DataGear制作支持全國、省、市三級數(shù)據(jù)鉆取效果的地圖數(shù)據(jù)可視化看板

看完了這篇文章，相信你對“如何使用DataGear制作支持全國、省、市三級數(shù)據(jù)鉆取效果的地圖數(shù)據(jù)可視化看板”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

如何使用DataGear制作支持全國、省、市三級數(shù)據(jù)鉆取效果的地圖數(shù)據(jù)可視化看板

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

如何使用DataGear制作支持全國、省、市三級數(shù)據(jù)鉆取效果的地圖數(shù)據(jù)可視化看板