DataGear 制作服务端分页的数据可视化看板

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

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

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

名称：
服务端分页-数据SQL：
select*
fromt_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.chartDataSetAttachment();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.chartOf(0);//设置第一个数据集的页索引、页大小参数值chart.dataSetParamValuesFirst([index, 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>