通过DataGear的参数化数据集、图表事件处理和看板API功能，可以很方便地制作联动异步加载图表的数据可视化看板。

首先，新建一个参数化SQL数据集，如下所示：

SELECT

  COL_NAME,   --地区名

  COL_VALUE,  --地区指标数值

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         山东

然后，使用上述数据集，新建两个图表，第一个是展示全国指标的地图图表：

图表类型：基本地图

数据集列标记：

COL_NAME：地区名称 (name)

COL_VALUE：指标数值 (value)

第二个是展示指定地区指标的柱状图：

图表类型：基本柱状图

数据集列标记：

COL_NAME：名称 (name)

COL_VALUE：数值 (value)

然后，新建可视化看板，填写如下看板模板内容：

<!DOCTYPE html>

<html dg-loadable-chart-widgets="[第二个图表ID]">

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.dg-chart{

  display: inline-block;

  width: 600px;

  height: 500px;

}

#loadChartWrapper{

  position:absolute;

  top:0;

  left:650px;

  width:400px;

  height:300px;

  box-shadow: 0px 0px 6px #474747;

  -webkit-box-shadow: 0px 0px 6px #474747;

  display:none;

}

#loadChart{

  position:absolute;

  top:2em;

  left:0;

  right:0;

  bottom:0;

}

</style>

<script type="text/javascript">

function chartClickHandler(chartEvent)

{

  //获取点击的地区名

  var name = chartEvent.data.name;

  $("#chartTitle").html(name);

  //图表已加载，直接刷新数据

  if(dashboard.renderedChart("loadChart"))

  {

    var chart = dashboard.chartOf("loadChart");

    chart.dataSetParamValueFirst(0, name);

    chart.refreshData();

    $("#loadChartWrapper").show();

  }

  //图表未加载

  else

  {

    dashboard.loadChart($("#loadChart"), "[第二个图表ID]",function(chart)

    {

      chart.dataSetParamValueFirst(0, name);

      $("#loadChartWrapper").show();

    });

  }

}

$(function()

{

  $("#removeChartBtn").click(function()

  {

    dashboard.removeChart("loadChart");

    $("#loadChartWrapper").hide();

  });

});

</script>

</head>

<body class="dg-dashboard">

<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 class="dg-chart" dg-chart-on-click="chartClickHandler"

    dg-chart-disable-setting="true"

    dg-chart-widget="[第一个图表ID]">

    <!--全国指标--></div>

  <div id="loadChartWrapper">

    <div id="chartTitle" style="position:absolute;top:2px;left:4px;font-weight:bold;"></div>

    <button id="removeChartBtn" style="position:absolute;top:2px;right:2px;">X</button>

    <div id="loadChart" dg-chart-disable-setting="true"

      dg-chart-options="{title:{show:false},legend:{show:false},grid:{top:30}}">

    <!--待加载的图表元素--></div>

  </div>

</div>

</body>

</html>

点击【保存并展示】按钮，打开看板展示页面，完成！！！

注意，上述模板中的“[第一个图表ID]”、“[第二个图表ID]”要替换为实际的ID。

效果图如下所示：

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

源码地址：

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

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

DataGear 制作联动异步加载图表的数据可视化看板的更多相关文章

  1. 使用getJSON()方法异步加载JSON格式数据

    使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...

  2. 异步加载回来的数据不受JS控制了

    写成下面这种方式时,异步加载回来的数据不受JS控制 $(."orderdiv").click(function(){ $(this).find(".orderinfo&q ...

  3. Unity跳转场景进度条制作教程(异步加载)

    Unity跳转场景进度条制作 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

  4. jsTree 的简单用法--异步加载和刷新数据

    首先这两个文件是必须要引用的,还有就是引用 jQuery 文件就不说了: <link href="/css/plugins/jsTree/style.min.css" rel ...

  5. 【vue】获取异步加载后的数据

    异步请求的数据,对它做一些处理,需要怎么做呢?? axios 异步请求数据,得到返回的数据, 赋值给变量 info .如果要对 info 的数据做一些处理后再赋值给 hobby ,直接在 axios ...

  6. 实用ExtJS教程100例-010：ExtJS Form异步加载和提交数据

    ExtJS Form 为我们提供了两个方法:load 和 submit,分别用来加载和提交数据,这两个方法都是异步的. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 F ...

  7. jquery.datatable.js与CI整合 异步加载（大数据量处理）

    http://blog.csdn.net/kingsix7/article/details/38928685 1.CI 控制器添加方法 $this->show_fields_array=arra ...

  8. LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据

    LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,之前我修改一版是通过reload重载实例方法填充子节点数据方式,因为递归页面元素时存 ...

  9. antd二级联动异步加载

    /** * Created by Admin on 2016/9/19. * 批量导入 */ import React, {Component, PropTypes} from "react ...

  10. Angular4中利用promise异步加载gojs

    GoJS是一个实现交互类图表(比如流程图,树图,关系图,力导图等等)的JS库 gojs提供了angular的基本例子,不过是离线版 https://github.com/NorthwoodsSoftw ...

随机推荐

  1. UData查询引擎优化-如何让一条SQL性能提升数倍

    1 UData-解决数据使用的最后一公里 1.1 背景 在大数据的范畴,我们经历了数据产业化的历程,从各个生产系统将数据收集起来,经过实时和离线的数据处理最终汇集在一起,成为我们的主题域数据,下一步挖 ...

  2. ToneGenerator Init failed Crash 崩溃

    需求需要在扫码时产生一个短促的提示音, 搜了下像这样实现.测试时发现多次扫码后,会触发程序崩溃问题. 异常如下 java.lang.RuntimeException: Init failed at a ...

  3. Git的使用（一）：创建本地仓库并在其中添加、修改、删除文件

    创建本地版本库 版本库又名仓库,英文名repository,可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以追踪历史,或者 ...

  4. 结构体定义及结构体粒度（alignment）

    结构体定义及结构体粒度(alignment) #pragma pack(1) typedef struct _STUDENT_INFORMATION_ { int Age; char v1; int ...

  5. 第三届人工智能，大数据与算法国际学术会议 (CAIBDA 2023)

    第三届人工智能,大数据与算法国际学术会议 (CAIBDA 2023) ​ 大会官网:http://www.caibda.org/ 大会时间:2023年6月16-18日 大会地点:中国郑州 截稿日期:2 ...

  6. NLP文本匹配任务Text Matching [无监督训练]：SimCSE、ESimCSE、DiffCSE 项目实践

    NLP文本匹配任务Text Matching [无监督训练]:SimCSE.ESimCSE.DiffCSE 项目实践 文本匹配多用于计算两个文本之间的相似度,该示例会基于 ESimCSE 实现一个无监 ...

  7. 主动学习（Active Learning）简介综述汇总以及主流技术方案

    0.引言 在机器学习(Machine learning)领域,监督学习(Supervised learning).非监督学习(Unsupervised learning)以及半监督学习(Semi-su ...

  8. C/C++ MinHook 库的使用技巧

    在上面的各种Hook挂钩方式中,我们都是在手写封装代码,但这样的方式并不高效,真正的生产环境中我们必须使用现成的Hook库,常用的Hook库有免费开源的MinHook和商业的Detours Hook, ...

  9. Win32汇编：算数运算指令总结

    整理复习汇编语言的知识点,以前在学习<Intel汇编语言程序设计 - 第五版>时没有很认真的整理笔记,主要因为当时是以学习理解为目的没有整理的很详细,这次是我第三次阅读此书,每一次阅读都会 ...

  10. 从嘉手札<2023-11-20>

    写给十年如一日的偶像--Faker "我看了一下,觉得视频还不够清晰,等我换一个清晰点的摄像头再回来直播,不要走开~" 繁星满天,流光飞逝. 世界是一场盛大的表演, 舞台上熙熙攘攘 ...