您现在的位置是：首页 > 文章详情

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

日期：2021-03-14点击：592收藏

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>

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

效果图如下所示：