DataGear 制作支持全国、省、市三级数据钻取效果的地图数据可视化看板

Stella981
• 阅读 569

通过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),需要通过看板编辑页面添加看板资源功能添加至看板。

效果图如下所示:

DataGear 制作支持全国、省、市三级数据钻取效果的地图数据可视化看板

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

源码地址:

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

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

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

点赞
收藏
评论区
推荐文章
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
DataGear 制作时序数据可视化看板
通过DataGear(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fdatagear.tech%2F)的参数化数据集和看板API功能,可以很方便地制作包含时序图表的看板。首先,以时间为参数,新建一个参数化SQL数据集:SELECTCOL_TIME,
Stella981 Stella981
1年前
DataGear 制作支持表单交互操作和多图表联动的数据可视化看板
对于数据可视化,有时需要根据用户输入的查询条件展示限定范围的数据图表,DataGear(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.datagear.tech)的看板表单功能可以快速方便地实现此类需求。下面的看板示例,包含一个柱状图、一个饼图和一个地图,用户可以通过看板表单
Stella981 Stella981
1年前
DataGear 制作联动异步加载图表的数据可视化看板
通过DataGear(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fdatagear.tech%2F)的参数化数据集、图表事件处理和看板API功能,可以很方便地制作联动异步加载图表的数据可视化看板。首先,新建一个参数化SQL数据集,如下所示:SELECTCO
helloworld_34035044 helloworld_34035044
7个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue