这篇文章主要介绍了如何使用DataGear制作服务端分页的数据可视化图表,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
首先,新建两个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>
点击[保存并展示]按钮,打开看板展示页面,完成!!!
效果图如下所示:
同样,服务端分页的柱状图效果图如下所示:
感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用DataGear制作服务端分页的数据可视化图表”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://my.oschina.net/u/4035217/blog/4985032