DataGear看板的圖表聯動功能,使您可以輕鬆製作支持圖表聯動的全國地圖、省級地圖數據可視化看板。
首先,新建兩個數據集。
第一個是各省指標數據集,將用於繪製全國指標圖表,它的SQL語句如下所示:
SELECT
COL_NAME,
COL_VALUE
FROM
T_ANALYSIS_PROVINCE
第二個是指定省的各市指標數據集,將用於繪製省級指標圖表,它是一個參數化數據集,其中,參數化SQL語句爲:
SELECT
'${省份}' AS COL_MAP,
COL_NAME,
COL_VALUE
FROM
T_ANALYSIS_CITY
WHERE
COL_PROVINCE = '${省份}'
參數定義爲:
參數名 類型 必填
省份 字符串 是
然後,使用上述兩個數據集分別建立全國指標圖表、省級指標圖表。
全國指標圖表:
圖表類型 : 基本地圖
數據集 : 各省指標數據集
數據集列標記 : COL_NAME 地區名稱;COL_VALUE 指標數值
省級指標圖表:
圖表類型 : 基本地圖
數據集 : 各市指標數據集
數據集列標記 : COL_NAME 地區名稱;COL_VALUE 指標數值;COL_MAP 地圖名
然後,新建可視化看板,填寫如下看板模板內容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-chart{
display: inline-block;
}
</style>
</head>
<body class="dg-dashboard">
<div class="dg-chart" dg-chart-link="{target:'chart0',data:{name:0}}" dg-chart-widget="全國指標圖表ID" style="width:700px;height:600px;"></div>
<div id="chart0" class="dg-chart" dg-chart-widget="省級指標圖表ID" style="width:400px;height:400px;"></div>
</body>
</html>
點擊[保存並展示]按鈕,打開看板展示頁面,完成!!!
效果圖如下所示:
源碼地址:
Gitee:https://gitee.com/datagear/datagear
Github:https://github.com/datageartech/datagear
大屏模板地址:https://gitee.com/datagear/DataGearDashboardTemplate