DataGear 制作支持全国、省、市三级数据钻取效果的地图数据可视化看板
通过DataGear的参数化数据集、图表联动和看板API功能,可以很方便地制作支持数据钻取效果的数据可视化看板。
首先,以上级地区名为参数,新建一个参数化SQL数据集:
SELECTCOL_NAME, --地区名COL_VALUE, --地区指标数值COL_PARENT AS COL_MAP --上级地区名,同时作为地图名
FROMT_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.dataSetParamValueFirst(0);if(!paramVal)paramHistory = [];elseparamHistory.push(paramVal);$("#title").html((paramVal ? paramVal : "全国") + " - 数据");}
};
$(document).ready(function()
{$("#backButton").click(function(){//获取上一次操作的上级地区名,设置为图表参数,然后刷新图表paramHistory.pop();var paramVal = (paramHistory.pop() || null);var chart = dashboard.chartOf("chart1");chart.dataSetParamValueFirst(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
源码地址:https://gitee.com/datagear/datagear
大屏模板地址:https://gitee.com/datagear/DataGearDashboardTemplate
DataGear 制作支持全国、省、市三级数据钻取效果的地图数据可视化看板相关推荐
- 数据分发服务器管理系统,地图差分数据分发系统、地图差分数据分发装置、地图数据保有装置、更新管理服务器、以及地图差分提取服务器...
主权项: 1.一种地图差分数据分发系统,其包括:地图差分数据分发装置(1,2),其具备地图差分数据储存部(12)和分发部(137),该地图差分数据储存部(12)储存更新地图要素的数据之前的版本的地图数 ...
- osm地图数据 mysql_[小O地图-数据] 下载世界范围的OSM地图数据
[概述] 小O地图是互联网专业地图数据软件,致力为广大科研人员提供专业地图数据,用于科研及学习. OSM是OpenStreet Map的缩写,OSM是全球最大的互联网在线地图网站,提供世界范围的地图数 ...
- 【DCIC】数据分析学习:3.地图数据统计
目录 学习目标 地图数据统计(基础知识) GPS经纬度 分组聚合统计 地图数据统计(实践) 统计巡游车与网约车分布 学习资源 任务 学习目标 GPS经纬度介绍 Pandas分组聚合 出租车与网约车经纬 ...
- 个人永久性免费-Excel催化剂功能第96波-地图数据挖宝之全国天气查询(区域最细可到区县,最长预报4天)...
天气预报的信息,是很普通的大家习以为常的信息,但如果不进行采集,在日常数据分析过程中,就少了非常重要的一个分析维度,如果人手采集整理,工作量巨大.此篇给广大数据分析工作者再次减负,只需简单一键,即可批 ...
- cad蜂鸟工具_蜂鸟视图地图数据中台,全面提升商业地产的可视化信息管控
作为曾经的地产新风口,商业地产一度成为广大开发商争相追捧的出路.随着互联网和线上电商的不断崛起,商业地产群雄并起的黄金时代早已经结束,"转型"成为地产行业最大的话题,如何改善商场的 ...
- 高德SD地图数据生产自动化技术的路线与实践(道路篇)
一.背景及现状 近些年,国内道路交通及相关设施的基础建设日新月异.广大用户日常出行需求旺盛,对所使用到的电子地图产品的数据质量和现势性提出了更高的要求.传统的地图数据采集和生产过程,即通过采集设备实地 ...
- 揭秘!文字识别在高德地图数据生产中的演进
简介:丰富准确的地图数据大大提升了我们在使用高德地图出行的体验.相比于传统的地图数据采集和制作,高德地图大量采用了图像识别技术来进行数据的自动化生产,而其中场景文字识别技术占据了重要位置.商家招牌上的 ...
- 文字识别在高德地图数据生产中的演进
导读:丰富准确的地图数据大大提升了我们在使用高德地图出行的体验.相比于传统的地图数据采集和制作,高德地图大量采用了图像识别技术来进行数据的自动化生产,而其中场景文字识别技术占据了重要位置.商家招牌上的 ...
- poi hssfcellstyle 文字方向_揭秘!文字识别在高德地图数据生产中的演进
简介:丰富准确的地图数据大大提升了我们在使用高德地图出行的体验.相比于传统的地图数据采集和制作,高德地图大量采用了图像识别技术来进行数据的自动化生产,而其中场景文字识别技术占据了重要位置.商家招牌上的 ...
最新文章
- 基于Python的自动特征工程——教你如何自动创建机器学习特征
- 再次修订后的版本。。。。。。1.0(发布版,射线求交三角形)
- asp.net 漂亮搜索框_推荐4款影视搜索工具,十一假期让你看剧看到爽
- Metro Win8风格的按钮(Filp翻转)
- listFiles()
- Python教程:对 a = [lambda : x for x in range(3)] 的理解
- Alteral Max 10 FPGA 优点
- Vue.js 动态为img的src赋值
- android 打印kernel log,android8.0 kernel4.9.44 各层log打开
- linux下解析域名
- 阿里云肖力:原生安全打造云上绿洲
- Vue系列:通过vue-router如何传递参数
- apache poi excel显示 base64 图片_java操作Excel一:POI
- 西门子PLC面向对象编程
- visual studio python使用教程_教程:在 Visual Studio 中开始使用 Flask Web 框架
- 苹果官方付费升级内存_vivo推出内存扩容服务:良心还是坑钱?
- 【PB】数据窗口的修改属性
- super this
- c语言编程华容道,C/C++仿华容道小游戏
- 蓝桥杯 算法提高-求最大值(dp基础/类01背包+滚动数组)