「实战应用」如何可视化 DHTMLX Scheduler 中的资源工作量?
DHTMLX Scheduler是一个全面的 UI 组件,用于处理面向业务的 Web 应用程序中复杂的调度和任务管理需求。但是,某些场景可能需要自定义解决方案。例如,如果项目的资源(即劳动力)有限,则需要确保以更高的精度分配他们的工作量。为此,应用条形图等数据可视化工具会很有用。
DHTMLX Suite允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件,这些组件可以轻松组合到单个应用程序界面中。
DHTMLX Scheduler 最新版下载 DHTMLX Suite 最新版下载
在本教程中,您将学习如何将我们的 Scheduler 组件连接到DHTMLX Suite中的 JavaScript Chart 库,从而增强对调度应用程序任何视图中的资源工作负载的控制。
DHTMLX Scheduler 与 Suite 图表库的连接指南
如果您需要在我们的JavaScript 调度库中添加一种用于管理资源工作量的辅助机制,您可以使用基于 Suite 的 Chart 小部件的条形图对其进行补充,如下面的示例所示。使用此示例,您可以更改员工的工作时间,这些更改将动态显示在图表中。此外,您还可以通过单击图表图例中的员工姓名来隐藏和显示两个小部件中特定员工的数据。
步骤 1:初始化并配置调度程序
一般来说,DHTMLX Scheduler 可以通过调度程序的标记或标头配置属性在页面上初始化。
在这篇文章中,我们使用第二种选择:
scheduler.init ( " scheduler_here " , new Date ( 2024 , 5 , 24 ) , "week" ) ;
现在,我们进行调度程序配置:
- 限制显示的工作时间,并将时间步长设置为30分钟:
scheduler.config.first_hour = 9; scheduler.config.last_hour = 22; scheduler.config.time_step = 30; scheduler.config.cascade_event_display = true;
- 添加通过灯箱将事件分配给不同人员/员工的功能,并根据他们的工作场所为其着色。为此,您需要创建一个员工数组 ( owner_opts ),并将他们的选择控件添加到灯箱:
let owners = [{ key: 1, label: 'John' },{ key: 2, label: 'Hannah' },{ key: 3, label: 'David' } ];scheduler.locale.labels.section_select = 'Owner';scheduler.config.lightbox.sections = [{ name:"text", height:50, map_to:"text", type:"textarea", focus:true },{ name:"select", height:40, map_to:"owner_id", type:"select", options:owners},{ name:"time", height:72, type:"time", map_to:"auto"} ];scheduler.templates.event_class = function(start, end, ev){return `owner_${ev.owner_id}`; }
- 在 CSS 文件中设置这些事件的样式:
<style>.owner_1 {--dhx-scheduler-event-background: #394E79;--dhx-scheduler-event-color: white;}.owner_2 {--dhx-scheduler-event-background: #5E83BA;--dhx-scheduler-event-color: white;}.owner_3 {--dhx-scheduler-event-background: #C2D2E9;--dhx-scheduler-event-color: white;} </style>
接下来,我们转到 DHTMLX 图表。
步骤 2:初始化和配置图表
首先,您需要创建一个配置,在其中指定图表的类型和其他设置。使用getConfig函数:
function getConfig() {return {type: "bar",css: "dhx_widget--bg_white dhx_widget--bordered", // Set the coordinate axes in accordance with the displayed datascales: {"bottom": {text: "day",textTemplate: function(day) {return day;}},"left":{title: "Hours",max: 24}}, // Configure the chart series series: [{id: "A",value: "John",fill: "#394E79",color: "none"},{id: "B",value: "Hannah",fill: "#5E83BA",color: "none"},{id: "C",value: "David",fill: "#C2D2E9",color: "none"}], // Add the chart legend configurationlegend: {series: ["A", "B", "C"],form: "rect",valign: "top",halign: "right"}} }
之后,使用dhx.Chart对象构造函数初始化条形图:
const chart = new dhx.Chart ( " chart " , getConfig ( ) ) ;
步骤 3:将数据从 Scheduler 传输到 Chart
由于 Scheduler 和 Chart 使用不同的数据格式,因此您需要先转换 Scheduler 数据,然后再将其传输到 Chart。为此,您需要获取一周中每一天的所有事件,计算每个事件的持续时间(以小时为单位),并将这些小时数分配给 3 个不同的对象(您的场景中的对象数量可能不同,我们的演示中有 3 个),具体取决于这些事件分配给哪个所有者。
您需要编写自定义函数并使用部分 Scheduler API:
1.创建calculateEventsLoad()函数:
function calculateEventsLoad(){
2.通过 API 获取调度程序视图日期:
let state = scheduler.getState();let min = state.min_date;
3.声明变量来存储计算的数据:
let tempDuration_a, tempDuration_b, tempDuration_c;let workload = [];
4.计算每个业主的工作量:
for(let i = 0; i<7; i++){tempDuration_a = 0;tempDuration_b = 0;tempDuration_c = 0;
5.获取一周中每一天的活动:
let dayEvs = scheduler.getEvents(scheduler.date.add(new Date(min), i, "day"), scheduler.date.add(new Date(min), i+1, "day"));
6.计算每个业主的活动工作量:
dayEvs.forEach(ev => {const duration = (ev.end_date - ev.start_date) / (1000 * 60 * 60);switch (ev.owner_id) {case "1":tempDuration_a += duration;break;case "2":tempDuration_b += duration;break;case "3":tempDuration_c += duration;break;}});
7.将结果数据推送到数组中,并将该数据传递给图表组件:
workload[i] = {"workload_a": tempDuration_a,"workload_b": tempDuration_b,"workload_c": tempDuration_c,"day": scheduler.date.add(new Date(min), i, "day").getDate()};}generateChartData(workload); }
8.创建将准备好的数据转换为图表格式并将其解析为图表的函数:
function generateChartData(workload){// Generate and parse prepared chart's dataconst chartData = workload.map(el => ({day : el.day,"John" : el.workload_a,"Hannah" : el.workload_b,"David" : el.workload_c,}));chart.data.parse(chartData);
调用calculateEventsLoad()函数时,您将看到包含准确数据的图表和调度程序。
步骤 4:将 Scheduler 与 Chart 同步
最后,您需要同步组件以确保在调度日历中所做的更改将立即显示在条形图中。您应该使用调度程序事件侦听器将调度程序更新同步到图表中,如下例所示:
scheduler.attachEvent("onEventChanged", function(id,ev){calculateEventsLoad(); });scheduler.attachEvent("onEventAdded", function(id,ev){calculateEventsLoad(); });scheduler.attachEvent("onEventSave",function(id,ev,is_new){calculateEventsLoad();return true; })scheduler.attachEvent("onViewChange", function (new_mode , new_date){calculateEventsLoad(); });
步骤 5:同步 Chart 和 Scheduler 中的过滤功能
条形图带有过滤功能,可以通过单击图表的图例来显示和隐藏特定员工的数据。您可以将此过滤功能与调度程序同步,以在那里过滤事件。
首先,您需要创建一个变量来存储过滤器值:
const filterOptions = new Set([1, 2, 3]);
然后,创建一个辅助函数来改变这个变量:
function setFilter(ownerID){if(filterOptions.has(ownerID)){filterOptions.delete(ownerID);}else{filterOptions.add(ownerID);}scheduler.setCurrentView(); }
使用图表组件的toggleSeries事件单击图表图例中的复选框后,将调用此辅助函数:
chart.events.on("toggleSeries", function(id){switch (id) {case "A":setFilter(1);break;case "B":setFilter(2);break;case "C":setFilter(3);break;} });
现在,您应该使用结果数组在调度程序中进行过滤:
scheduler.filter_week = function(id, event){return filterOptions.has(parseInt(event.owner_id)); }
就是这样。按照上述步骤,您可以像我们的示例中那样使用条形图来丰富您的 JavaScript 调度程序,以更准确地管理资源工作负载。
总结
正确使用资源是任何项目中有效任务管理的关键方面。使用 JavaScript 调度日历,您必须确保资源(员工、房间、设备)以最佳方式加载任务或约会。使用附加工具(例如 Suite 的 Chart 小部件)可以更全面地了解此事,本教程提供了快速顺利完成集成所需的所有信息。
相关文章:

「实战应用」如何可视化 DHTMLX Scheduler 中的资源工作量?
DHTMLX Scheduler是一个全面的 UI 组件,用于处理面向业务的 Web 应用程序中复杂的调度和任务管理需求。但是,某些场景可能需要自定义解决方案。例如,如果项目的资源(即劳动力)有限,则需要确保以更高的精度分…...

论文阅读《BEVFormer》
BEVFormer: Learning Bird’s-Eye-View Representation from Multi-Camera Images via Spatiotemporal Transformers 目录 摘要1 介绍2 相关工作2.1 基于Transformer的2D感知 摘要 3D视觉感知任务对于自动驾驶系统至关重要,包括基于多相机图像的3D检测和地图分割。…...
sql专题 之 sql的执行顺序
文章目录 sql的执行顺序sql语句的格式实际的执行顺序:虚拟表 vs 数据集虚拟表 结果集总结嵌套查询在sql查询中的执行顺序 前文我们了解了sql常用的语句,这次我们对于这些语句来个小思索 戳这里→ sql专题 之 常用命令 sql的执行顺序 SQL语句的执行顺序是…...

Vue3 -- 基于Vue3+TS+Vite项目【项目搭建及初始化】
兼容性注意: Vite 需要 Node.js 版本 18+ 或 20+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。【摘抄自vite官网】 这里我用的node版本是 v18.20.2 创建项目: 创建项目我们可以使用npm、yarn、pnpm、bun …...
CTF-RE: TEA系列解密脚本
// // Created by A5rZ on 2024/10/26. //#ifndef WORK_TEA_H #define WORK_TEA_H#endif //WORK_TEA_H#include <cstdint> #include <cstdio>// 定义TEA加密算法的轮次,一般建议为32轮 #define TEA_ROUNDS 32 #define DELTA 0x9e3779b9// TEA加密函数 v…...

信号量和线程池
1.信号量 POSIX信号量,用与同步操作,达到无冲突的访问共享资源目的,POSIX信号量可以用于线程间同步 初始化信号量 #include <semaphore.h> int sem_init(sem_t *sem, int pshared, unsigned int value); sem:指向sem_t类…...

【人工智能】10分钟解读-深入浅出大语言模型(LLM)——从ChatGPT到未来AI的演进
文章目录 一、前言二、GPT模型的发展历程2.1 自然语言处理的局限2.2 机器学习的崛起2.3 深度学习的兴起2.3.1 神经网络的训练2.3.2 神经网络面临的挑战 2.4 Transformer的革命性突破2.4.1 Transformer的核心组成2.4.2 Transformer的优势 2.5 GPT模型的诞生与发展2.5.1 GPT的核心…...

「QT」几何数据类 之 QPointF 浮点型点类
✨博客主页何曾参静谧的博客📌文章专栏「QT」QT5程序设计📚全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…...

可能是全网第一个MySQL Workbench插件编写技巧
引言 应公司要求,数据库的敏感数据在写入到数据库中要进行加密,但是在测试环境查询数据的时候要手动解密,很不方便,有的时候数据比较多,解密比较麻烦。遂研究了一下如何通过 MySQL Workbench 的插件来实现查询数据一键…...

D62【python 接口自动化学习】- python基础之数据库
day62 SQL 基础 学习日期:20241108 学习目标:MySQL数据库-- 131 SQL基础和DDL 学习笔记: SQL的概述 SQL语言的分类 SQL的语法特征 DDL - 库管理 DDL - 表管理 总结 SQL是结构化查询语言,用于操作数据库,通用于绝大…...
探索美赛:从准备到挑战的详细指南
前言 美国大学生数学建模竞赛(MCM/ICM),简称“美赛”,是全球规模最大的数学建模竞赛之一。它鼓励参赛者通过数学建模来解决现实世界中的复杂问题,广受世界各地大学生的欢迎。本文将详细介绍美赛的全过程,从…...
IP地址查询——IP归属地离线库
自从网络监管部门将现实IP地址列入监管条例,IP地址的离线库变成网络企业发展业务的不可或缺的一部分,那么IP地址离线库是什么,又能够给我们带来什么呢? 什么是IP地址离线库? IP地址离线库是IP地址服务商将通过各种合…...

“倒时差”用英语怎么说?生活英语口语学习柯桥外语培训
“倒时差”用英语怎么说? “倒时差”,这个让无数旅人闻之色变的词汇,在英语中对应的正是“Jet Lag”。"Jet" 指的是喷气式飞机,而 "lag" 指的是落后或延迟。这个短语形象地描述了当人们乘坐喷气式飞机快速穿…...

Linux入门攻坚——37、Linux防火墙-iptables-3
私网地址访问公网地址的问题,请求时,目标地址是公网地址,可以在公网路由器中进行路由,但是响应报文的目的地址是私网地址,此时在公网路由器上就会出现问题。公网地址访问私网地址的问题,需要先访问一个公网…...
微服务架构面试内容整理-安全性-Spring Security
Spring Security 是 Spring 框架中用于实现认证和授权的安全模块,它提供了全面的安全解决方案,可以帮助开发者保护 Web 应用、微服务和 API 免受常见的安全攻击。以下是 Spring Security 的主要特点、工作原理和使用场景: 主要特点 1. 身份认证与授权: 提供多种认证方式,…...

新的服务器Centos7.6 安装基础的环境配置(新服务器可直接粘贴使用配置)
常见的基础服务器配置之Centos命令 正常来说都是安装一个docker基本上很多问题都可以解决了,我基本上都是通过docker去管理一些容器如:mysql、redis、mongoDB等之类的镜像,还有一些中间件如kafka。下面就安装一个 docker 和 nginx 的相关配置…...
深度学习:广播机制
广播机制(Broadcasting)是 PyTorch(以及其他深度学习框架如 NumPy)中的一种强大功能,它允许不同形状的张量进行逐元素操作,而不需要显式地扩展张量的维度。广播机制通过自动扩展较小的张量来匹配较大张量的…...

音视频入门基础:FLV专题(25)——通过FFprobe显示FLV文件每个packet的信息
音视频入门基础:FLV专题系列文章: 音视频入门基础:FLV专题(1)——FLV官方文档下载 音视频入门基础:FLV专题(2)——使用FFmpeg命令生成flv文件 音视频入门基础:FLV专题…...

Openstack7--安装消息队列服务RabbitMQ
只需要在控制节点安装 安装RabbitMQ yum -y install rabbitmq-server 启动RabbitMQ并设置开机自启 systemctl start rabbitmq-server;systemctl enable rabbitmq-server 创建 rabbitmq 用户 并设置密码为 000000 rabbitmqctl add_user rabbitmq 000000 如果你不慎创错了…...
day55 图论章节刷题Part07([53.寻宝]prim算法、kruskal算法)
前言:使用最小生成树的方法解决将所有节点连接起来所需的最小路径问题。 prim算法 Prim算法是一种贪心算法,从任意一个顶点开始构建最小生成树。每次选择当前已加入生成树的顶点中,距离最近的尚未加入生成树的顶点,直到所有顶点…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

如何理解 IP 数据报中的 TTL?
目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…...

深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...