DataGear 制作服务端分页的数据可视化图表
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 #ccc;
}
#pagination{
text-align: center;
}
.pagination-button{
border: 1px solid #333;
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 = $("#pagination");
$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);
$("#pagination").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>
点击[保存并展示]按钮，打开看板展示页面，完成！！！
效果图如下所示：
同样，服务端分页的柱状图效果图如下所示：
源码地址：
Gitee：https://gitee.com/datagear/datagear
