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

news/2024/7/22 4:21:06/文章来源:https://blog.csdn.net/datagear/article/details/139115967

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>

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

效果图如下所示:

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

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

源码地址:

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1053691.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务器数据恢复—RAID5阵列崩溃如何恢复上层OA和oracle数据库的数据?

服务器数据恢复环境&故障&#xff1a; 某公司的一台服务器中的raid5磁盘阵列有两块磁盘先后掉线&#xff0c;服务器崩溃。故障服务器的操作系统为linux&#xff0c;操作系统部署了oa&#xff0c;数据库为oracle。oracle数据库已经不再对该oa系统提供后续支持&#xff0c;用…

LabVIEW高低温试验箱控制系统

要实现LabVIEW高低温试验箱控制系统&#xff0c;需要进行硬件配置、软件设计和系统集成&#xff0c;确保LabVIEW能够有效地监控和控制试验箱的温度。以下是详细说明&#xff1a; 硬件配置 选择合适的试验箱&#xff1a; 确定高低温试验箱的型号和品牌。 确认试验箱是否支持外…

springboot项目部署到linux服务器

springboot后端 修改前 修改后 vue前端 修改前 将地址中的 localhost改为 ip 重新生成war包 war上传到linux的tomcat的webapps下 其他环境配置和macOS大差不差 Tomcat安装使用与部署Web项目的三种方法_tomcat部署web项目-CSDN博客

【C++】list的使用方法和模拟实现

❤️欢迎来到我的博客❤️ 前言 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其前一个元素和后…

告别裸奔,聊聊主流消息队列的认证和鉴权!

大家好&#xff0c;我是君哥。 我们在使用消息队列时&#xff0c;经常关注的是消息队列收发消息的功能。但好多时候需要对客户端有一定的限制&#xff0c;比如只有持有令牌的客户端才能访问集权&#xff0c;不允许 Producer 发送消息到某一个 Topic&#xff0c;或者某一个 Top…

【机器学习300问】103、简单的经典卷积神经网络结构设计成什么样?以LeNet-5为例说明。

一个简单的经典CNN网络结构由&#xff1a;输入层、卷积层、池化层、全连接层和输出层&#xff0c;这五种神经网络层结构组成。它最最经典的实例是LeNet-5&#xff0c;它最早被设计用于手写数字识别任务&#xff0c;包含两个卷积层、两个池化层、几个全连接层&#xff0c;以及最…

软件功能测试的类型和流程分享

在现代社会&#xff0c;软件已经成为人们生活中不可或缺的一部分&#xff0c;而在软件的开发过程中&#xff0c;功能测试是不可或缺的环节。软件功能测试指的是对软件系统的功能进行检查和验证&#xff0c;以确保软件在各种情况下能够正常运行&#xff0c;并且能够按照用户需求…

《Java数据结构》--单链表详解

一.单链表的概念 1.概念 单链表是一种物理存储结构是非连续&#xff0c;非线性的但是在逻辑结构上是连续且线性的&#xff0c;链表是通过一个个结点来实现的&#xff0c;使每个相邻结点之间存在一定关系来将所有结点串起来&#xff0c;在物理存储上像是一条链子。 2.链表的原…

【数据分析】Numpy和Pandas库基本用法及实例--基于Japyter notebook实现

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 承接上篇的博客 数据分析—技术栈和开发环境搭…

工作纪实50-Idea下载项目乱码

下载了公司的一份项目代码&#xff0c;发现是gbk格式的&#xff0c;但是我的日常习惯又是utf-8&#xff0c;下载项目以后全是乱码&#xff0c;一脸懵 借用网友的一张图&#xff0c;如果是一个一个文件这么搞&#xff0c;真的是费劲&#xff0c;好几百个文件&#xff01; 步骤…

React@16.x(11)ref

目录 1&#xff0c;介绍1.1&#xff0c;得到的结果 2&#xff0c;参数类型2.1&#xff0c;字符串&#xff08;不再推荐&#xff09;2.2&#xff0c;对象2.3&#xff0c;函数函数调用时机 3&#xff0c;注意点 1&#xff0c;介绍 reference 引用。和 vue 中的 refs 类似&#x…

rk3568_mutex

文章目录 前言1、什么是mutex?1.1mutex互斥体API函数二、实验2.1实验目的2.2源码2.3结果图前言 本文记录的是rk3568开发板基础上做的mutex实验 1、什么是mutex? mutex是互斥体,它是比信号量semaphore更加专业的机制。 在我们编写Linux驱动的时候遇到需要互斥的地方建议使用…

TypeScript系列之-- 数组和元组类型

数组的定义&#xff1a; 第一种&#xff0c;可以在元素类型后面接上[] let list: number[] [1, 2, 3]; 第二种方式是使用数组泛型&#xff0c;Array<元素类型> let list: Array<number> [1, 2, 3]; 如果数组想每一项放入不同数据怎么办&#xff1f;用元组类型…

UE5 双手握剑的实现(逆向运动学IK)

UE5 双手握剑的实现 IK 前言 什么是IK&#xff1f; UE官方给我们提供了很多对于IK处理的节点&#xff0c;比如ABRIK、Two Bone IK、Full Body IK 、CCD IK等&#xff0c;但是看到这&#xff0c;很多人就好奇了&#xff0c;什么是IK&#xff1f; 首先我们来看看虚幻小白人的骨…

leetcode-主持人调度(二)-110

题目要求 思路 1.先将开始时间和结束时间拆分放到两个数组中进行排序 2.如果开始的时间小于结束时间&#xff0c;说明目前没有空闲的人&#xff0c;需要增加人&#xff0c;如果大于等于&#xff0c;说明有人刚结束了主持&#xff0c;可以进行新的主持了&#xff0c;变更到下一…

Java实现对PDF、纵向、横向页面添加自定义水印功能

Java实现对PDF、纵向、横向页面添加自定义水印 效果图 -- 纵向 页面PDF使用到JAR Maven依赖版本效果图 -- 横向页面PDF 效果图 – 纵向 页面PDF 代码如下&#xff1a; 使用到JAR Maven依赖版本 <dependency><groupId>org.apache.pdfbox</groupId><artifa…

2024.05.28学习记录

1. 小林coding 计网复习 2.代码随想录刷题. 图论.和复习数组.链表 3.rosebush完成select组件

BLE蓝牙模块在车联网中的智能开锁、数据监控应用

随着科技的不断发展&#xff0c;车联网已经成为了汽车行业的一个热门话题。在这个领域中&#xff0c;BLE蓝牙模块发挥着重要的作用&#xff0c;特别是在智能开锁和数据监控方面的应用。本文将详细介绍BLE蓝牙模块在这两个方面的应用及其优势。   一、智能开锁   1.车辆远程…

安卓开发--安卓使用Echatrs绘制折线图

安卓开发--安卓使用Echatrs绘制折线图 前期资料安卓使用Echarts绘制折线图1.1 下载 Echarts 安卓资源1.2 新建assets文件1.3 新建布局文件1.4 在布局文件中布局WebView1.5 在活动文件中调用 最终效果 前期资料 Echarts 官网样式预览: https://echarts.apache.org/examples/zh/…

MySQL中视图是什么,有什么作用

目录 一、视图的简介 1.1 什么是视图&#xff1f; 1.2 为什么使用视图&#xff1f; 1.3 视图有哪些规则与限制&#xff1f; 1.4 视图能否更新&#xff1f; 二、视图的创建 三、视图的作用 3.1 用视图简化复杂的联结 3.2 用视图格式化检索出的数据 3.3 用视图过滤数据…