您现在的位置是:首页 >  编程分享 > LINUX丨SYSTEMLINUX丨SYSTEM

DataGear制作服务端分页的数据可视化图表

DataGear 转载 编程分享 2021-03-20

简介 DataGear 2.3.0 版本新增了附件图表数据集特性(在新建图表时将关联的数据...


DataGear 2.3.0 版本新增了附件图表数据集特性(在新建图表时将关联的数据集设置为 附件 ,具体参考官网文档定义图表章节),在制作看板时,可以基于此特性,结合dg-chart-listener,利用服务端数据扩展图表功能。本文以表格图表为例,介绍基于此特性制作服务端分页的数据可视化图表。

首先,新建两个SQL数据集。

第一个数据集查询服务端分页数据,它是一个参数化数据集:

名称:
服务端分页-数据

SQL:
select
    *
from
    t_analysis
order by NAME asc
limit ${index}, ${size}

参数:
名称    类型    必填   描述
index   数值     是    页索引
size    数值     是    页大小

第二个数据集查询总记录数:

名称:
服务端分页-总记录数

SQL:
select count(*) as total from t_analysis

参数:
无

然后,新建一个图表,并关联上述两个数据集:

名称:
服务端分页表格

类型:
基本表格

数据集:
1. 服务端分页-数据
2. 服务端分页-总记录数(勾选【附件】单选框)

最后,新建一个看板,引入上述图表,添加分页扩展代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-dashboard{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.dg-chart{
  display: inline-block;
  width: 100%;
  height: 400px;
}
.chart-wrapper{
  display: inline-block;
  width: 80%;
  margin-left: 10%;
  padding: 2em 0em;
  border: 1px solid Idccc;
}
Idpagination{
  text-align: center;
}
.pagination-button{
  border: 1px solid Id333;
  border-radius: 5px;
  margin: 0 0.5em;
  padding: 0.5em 1.5em;
}
.pagination-current{
  background: blue;
  color: white;
}
.pagination-info{
  padding-left: 1em;
}
</style>
<script type='text/javascript'>
var pageSize = 5;

var chartListener=
{
  update: function(chart, results)
  {
    //获取第一个附件数据集(服务端分页-总记录数)中的总记录数
    var chartDataSet = chart.chartDataSetFirst(true);
    var totalResult = chart.resultOf(results, chartDataSet);
    var total = chart.resultCell(totalResult, "total", 0);

    //计算总页数
    var pages = (total%pageSize == 0 ? parseInt(total/pageSize) : parseInt(total/pageSize)+1);
    
    //获取当前页索引
    var currentIndex = chart.dataSetParamValue(0, 0);
    
    //绘制分页按钮
    var $pg = $("Idpagination");
    $pg.empty();
    for(var i=1; i<=pages; i++)
    {
      var myIndex = (i-1)*pageSize;
      
      $("<button class='pagination-button' />").attr("page-index", myIndex)
        .addClass(currentIndex == myIndex ? "pagination-current" : "")
        .html(i).appendTo($pg);
    }
    
    $("<span class='pagination-info' />").html("共"+pages+"页,"+total+"条记录").appendTo($pg);
  }
};

function refreshChart(index)
{
  var chart = dashboard.getChart(0);
  //设置第一个数据集的页索引、页大小参数值
  chart.dataSetParamValues(0, { index: index, size: pageSize });
  //刷新图表数据
  chart.refreshData();
}

$(function()
{
  //加载第一页
  refreshChart(0);
  
  $("Idpagination").on("click", ".pagination-button", function()
  {
    var index = parseInt($(this).attr("page-index"));
    refreshChart(index);
  });
});
</script>
</head>
<body class="dg-dashboard">
<div class="chart-wrapper">
  <div class="dg-chart"
    dg-chart-disable-setting="true"
    dg-chart-listener="chartListener"
    dg-chart-widget="上述图表ID">
  </div>
  <div id="pagination"></div>
</div>
</body>
</html>

点击[保存并展示]按钮,打开看板展示页面,完成!!!

效果图如下所示:

同样,服务端分页的柱状图效果图如下所示:

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

源码地址:

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

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

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

参考地址:https://my.oschina.net/u/4035217/blog/4985032


Tags:


本篇评论 —— 揽流光,涤眉霜,清露烈酒一口话苍茫。


    声明:参照站内规则,不文明言论将会删除,谢谢合作。


      最新评论



ABOUT ME

Name:袅袅牧童 | Arkin

Job:Web全栈技术工程师

WeChat:nnmutong

Email:nnmutong@icloud.com

标签云